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

package.json

@@ -36,6 +36,7 @@
     "moment": "^2.29.4",
     "pdf-lib": "^1.17.1",
     "pinia": "^2.0.29",
+    "pinia-plugin-persistedstate": "^3.2.3",
     "quasar": "^2.11.1",
     "socket.io-client": "^4.7.4",
     "structure-chart": "^0.0.9",

src/api/02_organizational/api.organization.ts

@@ -194,6 +194,7 @@ export default {
     `${orgProfile}${type}/profileid/position`,
   uploadProfile: (type: string, id: string) =>
     `${organization}/upload/${type}-profileSalaryTemp/${id}`,
+  sortOrderByDate: `${orgProfile}/salaryTemp/sort-order`,
 
   workflowCommanderOperate: `${workflow}/commander/operate`,
   workflowCommanderSign: `${workflow}/commander/sign`,

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/api/recruiting/api.recruit.ts

@@ -23,6 +23,7 @@ export default {
   uploadCandidates: (id: string) => `${recruit}candidate/${id}`,
   uploadResult: (id: string) => `${recruit}result/${id}`,
   getImportHistory: (id: string) => `${recruit}history/${id}`,
+  getImportStatus: (jobId: string) => `${recruit}import/status/${jobId}`,
 
   //upload
   periodRecruitDoc: (examId: string) => `${recruit}doc/${examId}`,

src/components/CardProfile.vue

@@ -8,6 +8,7 @@ import config from "@/app.config";
 import type { PropType } from "vue";
 import type { FormProfile } from "@/interface/main";
 import type { DataProfile } from "@/modules/05_placement/interface/index/Main";
+import avatarMain from "@/assets/avatar_user.jpg";
 
 /** importComponents*/
 import PopupPersonal from "@/components/Dialogs/PopupPersonalNew.vue";
@@ -43,9 +44,9 @@ async function fetchDataProfile(data: DataProfile) {
     profile.avatar = data?.avatar ? data.avatar : "";
   }
   profile.id = data.profileId;
-  profile.fullName = `${data.prefix ?? ""}${data.firstName ?? ""} ${
+  profile.fullName = `${data.rank ? data.rank : data.prefix ?? ""}${
-    data.lastName ?? ""
+    data.firstName ?? ""
-  } `;
+  } ${data.lastName ?? ""} `;
 
   if (data["posTypeNameOld"] !== undefined) {
     profile.position =
@@ -91,8 +92,11 @@ function fetchProfile(id: string, name: string) {
   if (profile.avatar === "") {
     http
       .get(config.API.fileByFile("ทะเบียนประวัติ", "โปรไฟล์", id, `${name}`))
-      .then(async (res) => {
+      .then((res) => {
         profile.avatar = res.data.downloadUrl;
+      })
+      .catch(() => {
+        profile.avatar = avatarMain;
       });
   }
 }

src/components/DialogHeader.vue

@@ -9,6 +9,8 @@
       round
       dense
       @click="close"
+      @keydown.enter.prevent
+      @keydown.space.prevent
       style="color: #ff8080; background-color: #ffdede"
     />
   </q-toolbar>

src/components/Dialogs/DialogOrgSelect.vue

@@ -7,6 +7,7 @@ import http from "@/plugins/http";
 import config from "@/app.config";
 import { useCounterMixin } from "@/stores/mixin";
 import { useStructureTree } from "@/stores/structureTree";
+import { formatPosmasterNo } from "@/utils/function";
 
 import type { QTableProps } from "quasar";
 import type {
@@ -262,6 +263,7 @@ async function getDataTable(id: string, level: number = 0) {
     posType: posType.value ? posType.value : "",
     isAll: isAll.value,
     isBlank: isBlank.value,
+    profileId: type.value === "MOVE" ? props.dataRows.profileId : undefined,
   };
 
   await http
@@ -282,12 +284,12 @@ async function getDataTable(id: string, level: number = 0) {
       const listPosNo: DataPositionNo[] = dataMain.map((e: PositionMain) => ({
         id: e.id,
         isPosition: e.isPosition,
-        posMasterNo:
+        posMasterNo: formatPosmasterNo(
-          e.orgShortname +
+          e.orgShortname,
-          (e.posMasterNoPrefix != null ? e.posMasterNoPrefix : "") +
+          e.posMasterNoPrefix,
-          " " +
+          e.posMasterNo.toString(),
-          e.posMasterNo +
+          e.posMasterNoSuffix
-          (e.posMasterNoSuffix != null ? e.posMasterNoSuffix : ""),
+        ),
         positionName: e.positionName,
         posTypeName: e.posTypeName,
         posLevelName: e.posLevelName,
@@ -512,6 +514,7 @@ function onSubmit() {
       posLevelId: selectedPos.value[0].posLevelId, //ชื่อตำแหน่ง
       posLevelName: selectedPos.value[0].posLevelName, //ชื่อตำแหน่ง
       posExecutiveName: selectedPos.value[0].posExecutiveName, //ชื่อตำแหน่ง
+      posExecutiveId: selectedPos.value[0].posExecutiveId, //ชื่อตำแหน่ง
       reportingDate: convertDateToAPI(datePos.value),
       posmasterId: dataPosMaster.id,
       typeCommand: type.value,

src/components/Dialogs/DialogOrgSelectEmployee.vue

@@ -7,6 +7,7 @@ import http from "@/plugins/http";
 import config from "@/app.config";
 import { useCounterMixin } from "@/stores/mixin";
 import { useStructureTree } from "@/stores/structureTree";
+import { formatPosmasterNo } from "@/utils/function";
 
 import type { QTableProps } from "quasar";
 import type {
@@ -232,7 +233,8 @@ function close() {
 
 async function getDataTable(id: string, level: number = 0) {
   showLoader();
-
+  positionNo.value = [];
+  rowsData.value = [];
   const body = {
     node: level,
     nodeId: id,
@@ -262,11 +264,12 @@ async function getDataTable(id: string, level: number = 0) {
       const listPosNo: DataPositionNo[] = dataMain.map((e: PositionMain) => ({
         id: e.id,
         isPosition: e.isPosition,
-        posMasterNo:
+        posMasterNo: formatPosmasterNo(
-          e.orgShortname +
+          e.orgShortname,
-          (e.posMasterNoPrefix != null ? e.posMasterNoPrefix : "") +
+          e.posMasterNoPrefix,
-          e.posMasterNo +
+          e.posMasterNo.toString(),
-          (e.posMasterNoSuffix != null ? e.posMasterNoSuffix : ""),
+          e.posMasterNoSuffix
+        ),
         positionName: e.positionName,
         posTypeName: e.posTypeName,
         posLevelName: e.posLevelName,
@@ -302,9 +305,7 @@ async function getDataTable(id: string, level: number = 0) {
       messageError($q, err);
     })
     .finally(() => {
-      setTimeout(() => {
+      hideLoader();
-        hideLoader();
-      }, 1000);
     });
 }
 

src/components/Dialogs/PopupPersonalNew.vue

@@ -14,6 +14,7 @@ import type {
   GovermentEmpTemp,
 } from "@/components/information/interface/response/Government";
 import type { Avatar } from "@/components/information/interface/response/avatar";
+import avatarMain from "@/assets/avatar_user.jpg";
 
 /** importStore*/
 import { useCounterMixin } from "@/stores/mixin";
@@ -167,9 +168,9 @@ async function fetchInformation(id: string) {
       avatar.position = data.position ? data.position : "-";
       //ถ้ามีรูปเรียก Function  fetchProfile เรียกข้อมูลรูปโปรไฟล์
       if (data.avatarName) {
-        await fetchProfile(data.id as string, data.avatarName);
+        fetchProfile(data.id as string, data.avatarName);
       } else {
-        avatar.avatar = "";
+        avatar.avatar = avatarMain;
       }
 
       if (props.id) {
@@ -260,11 +261,14 @@ async function fetchProfileGovTemp(id: string) {
  * @param id profileID
  * @param avatarName ชื่อไฟล์
  */
-async function fetchProfile(id: string, avatarName: string) {
+function fetchProfile(id: string, avatarName: string) {
-  await http
+  http
     .get(config.API.fileByFile("ทะเบียนประวัติ", "โปรไฟล์", id, avatarName))
-    .then(async (res) => {
+    .then((res) => {
-      avatar.avatar = await res.data.downloadUrl;
+      avatar.avatar = res.data.downloadUrl;
+    })
+    .catch(() => {
+      avatar.avatar = avatarMain;
     });
 }
 

src/components/Workflow/DialogSelectPerson.vue

@@ -5,7 +5,6 @@ import { useQuasar } from "quasar";
 import { useCounterMixin } from "@/stores/mixin";
 import http from "@/plugins/http";
 import config from "@/app.config";
-import { getColumnLabel } from "@/utils/function";
 
 import type { QTableProps } from "quasar";
 
@@ -254,7 +253,7 @@ watch(modal, (val) => {
                 <q-th auto-width />
                 <q-th v-for="col in props.cols" :key="col.name" :props="props">
                   <span class="text-weight-medium">
-                    {{ getColumnLabel(col, isAct) }}
+                    {{ col.label }}
                   </span>
                 </q-th>
               </q-tr>

src/main.ts

@@ -13,6 +13,7 @@ import th from "quasar/lang/th";
 import "@vuepic/vue-datepicker/dist/main.css";
 import http from "./plugins/http";
 import { createPinia } from "pinia";
+import piniaPluginPersistedstate from "pinia-plugin-persistedstate";
 
 // import './assets/main.css'
 
@@ -20,6 +21,7 @@ import filters from "./plugins/filters";
 
 const app = createApp(App);
 const pinia = createPinia();
+pinia.use(piniaPluginPersistedstate);
 
 // เพิ่ม Global Filters ลงใน App
 app.config.globalProperties.$filters = filters;

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 Promise.all([
-            await props.edit?.(
+              await props.fetchDataTree(store.draftId),
-              props.dataNode?.orgTreeId,
+              await props.edit?.(
-              type,
+                props.dataNode?.orgTreeId,
-              body,
+                type,
-              props.dataNode?.orgRootCode
+                body,
-            );
+                props.dataNode?.orgRootCode
-            await props.fetchDataTable(
+              ),
-              props?.dataNode?.orgTreeId,
+              await props.fetchDataTable(
-              props?.dataNode?.orgLevel,
+                props?.dataNode?.orgTreeId,
-              false
+                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/DialogHistoryPos.vue

@@ -213,7 +213,9 @@ function formatHistoryOwnerData(data: HistoryPos[]) {
   return data.map((item) => ({
     ...item,
     fullname: item.firstName
-      ? `${item.prefix}${item.firstName} ${item.lastName}`.trim()
+      ? `${item.prefix || ""}${item.firstName || ""} ${
+          item.lastName || ""
+        }`.trim()
       : "ว่าง",
   }));
 }

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

@@ -48,7 +48,7 @@ const modal = defineModel<boolean>("modal", { required: true });
 let reqMaster = defineModel<FilterMaster>("reqMaster", { required: true });
 const totalPage = defineModel<number>("totalPage", { required: true });
 const nodeTree = defineModel<OrgTree[]>("nodeTree", { required: true });
-const columns = defineModel<QTableProps[]>("columns", {});
+const columns = defineModel<QTableProps['columns']>("columns", {});
 const rows = defineModel<PosMaster2[]>("rows", { required: true });
 const props = defineProps({
   fetchDataTree: {

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/components/TableMain.vue

@@ -9,6 +9,7 @@ import { checkPermission } from "@/utils/permissions";
 import { updateCurrentPage } from "@/utils/function";
 import { useOrganizational } from "@/modules/02_organization/store/organizational";
 import { useCounterMixin } from "@/stores/mixin";
+import { formatPosmasterNo } from "@/utils/function";
 
 /** importType*/
 import type { QTableProps } from "quasar";
@@ -205,6 +206,14 @@ const columns = ref<QTableProps["columns"]>([
     sortable: false,
     field: "posMasterNo",
     headerStyle: "font-size: 14px",
+    format(val, row) {
+      return formatPosmasterNo(
+        row.orgShortname,
+        row.posMasterNoPrefix,
+        row.posMasterNoMain,
+        row.posMasterNoSuffix
+      );
+    },
     style: "font-size: 14px",
   },
   {
@@ -1124,7 +1133,7 @@ watch(
   <DialogMovePos
     v-model:modal="modalDialogMMove"
     v-model:nodeTree="nodeTree"
-    v-model:columns="columns as QTableProps[]"
+    v-model:columns="columns"
     v-model:rows="posMaster"
     v-model:totalPage="totalPage"
     v-model:reqMaster="reqMaster"

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/02_organization/store/organizational.ts

@@ -108,6 +108,11 @@ export const useOrganizational = defineStore("organizationalStore", () => {
       posLevelName: e.isSit ? e.profilePoslevel : e.posLevelName,
       posExecutiveName: e.posExecutiveName,
       isSit: e.isSit,
+      orgShortname: e.orgShortname,
+      posMasterNoPrefix: e.posMasterNoPrefix,
+      posMasterNoSuffix: e.posMasterNoSuffix,
+      posMasterNoMain: e.posMasterNo,
+
     }));
 
     return newPosMaster || [];

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();
+  try {
-  await http
+    showLoader();
-    .get(config.API.downloadPassExam(examId.value))
+    const res = await http.get(
-    .then(async (res) => {
+      config.API.downloadCandidatePassExam(examId.value),
-      const data = res.data.result;
+      {
-      data.reportName = `Candidate_Dashboard_${dateToISO(new Date())}`;
+        headers: {
-      await genReport(data, data.reportName, "pdf");
+          "Content-Type": "application/pdf",
-    })
+          Accept: "application/pdf",
-    .catch((e) => {
+        },
-      messageError($q, e);
+        responseType: "blob",
-    })
+      }
-    .finally(() => {
+    );
-      hideLoader();
+    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();
+  try {
-  await http
+    showLoader();
-    .get(config.API.downloadCandidateExam(examId.value))
+    const res = await http.get(config.API.downloadCandidateExam(examId.value), {
-    .then(async (res) => {
+      headers: {
-      const data = res.data.result;
+        "Content-Type": "application/pdf",
-      data.reportName = `Candidate_Dashboard_${dateToISO(new Date())}`;
+        Accept: "application/pdf",
-      await genReport(data, data.reportName, "pdf");
+      },
-    })
+      responseType: "blob",
-    .catch((e) => {
-      messageError($q, e);
-    })
-    .finally(() => {
-      hideLoader();
     });
+    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-btn
-          <q-tooltip>ดาวน์โหลดไฟล์</q-tooltip>
+          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

@@ -45,6 +45,8 @@ interface RequestPeriodCompete {
   order: number;
   year: number;
   announcementDate: string | null;
+  rootDnaId: string;
+  scoreExpireDate: string | null;
 }
 
 interface RequestPeriodDisable {
@@ -63,6 +65,8 @@ interface RequestPeriodDisable {
   round: number;
   year: number;
   announcementDate: string | null;
+  rootDnaId: string;
+  scoreExpireDate: string | null;
 }
 
 interface RequestPosition {

src/modules/03_recruiting/router.ts

@@ -232,7 +232,7 @@ export default [
     component: PeriodDisable,
     meta: {
       Auth: true,
-      Key: "SYS_EXAM_SELECT_LISTNAME",
+      Key: "SYS_EXAM_SELECT_PERIOD_DIS",
       Role: "STAFF",
     },
   },
@@ -242,7 +242,7 @@ export default [
     component: PeriodDisableAdd,
     meta: {
       Auth: true,
-      Key: "SYS_EXAM_SELECT_LISTNAME",
+      Key: "SYS_EXAM_SELECT_PERIOD_DIS",
       Role: "STAFF",
     },
   },
@@ -252,7 +252,7 @@ export default [
     component: PeriodDisableAdd,
     meta: {
       Auth: true,
-      Key: "SYS_EXAM_SELECT_LISTNAME",
+      Key: "SYS_EXAM_SELECT_PERIOD_DIS",
       Role: "STAFF",
     },
   },
@@ -262,7 +262,7 @@ export default [
     component: MainDisableDetail,
     meta: {
       Auth: true,
-      Key: "SYS_EXAM_SELECT_LISTNAME",
+      Key: "SYS_EXAM_SELECT_PERIOD_DIS",
       Role: "STAFF",
     },
   },
@@ -272,7 +272,7 @@ export default [
     component: MainDisableEx,
     meta: {
       Auth: true,
-      Key: "SYS_EXAM_SELECT_LISTNAME",
+      Key: "SYS_EXAM_SELECT_PERIOD_DIS",
       Role: "STAFF",
     },
   },

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

@@ -1,7 +1,7 @@
 <!-- page:จัดการรอบการสอบ สรรหา -->
 <script setup lang="ts">
 import type { QTableProps } from "quasar";
-import { onMounted, ref } from "vue";
+import { onMounted, ref, watch } from "vue";
 import { useRouter } from "vue-router";
 import { useQuasar } from "quasar";
 import genReport from "@/plugins/genreport";
@@ -11,6 +11,9 @@ import config from "@/app.config";
 import { checkPermission } from "@/utils/permissions";
 import { useCounterMixin } from "@/stores/mixin";
 import { calculateFiscalYear } from "@/utils/function";
+import { useUploadProgressStore } from "@/stores/uploadProgress";
+import { useSocketStore } from "@/stores/socket";
+import { storeToRefs } from "pinia";
 
 import type { Pagination } from "@/modules/03_recruiting/interface/index/Main";
 import type {
@@ -33,9 +36,14 @@ const {
   messageError,
   onSearchDataTable,
   dialogRemove,
+  dialogMessage,
 } = mixin;
 
 const router = useRouter();
+const uploadProgress = useUploadProgressStore();
+const socketStore = useSocketStore();
+const { notificationCounter } = storeToRefs(socketStore);
+
 const name = ref<string>("");
 const year = ref<number>(calculateFiscalYear(new Date()) + 543);
 const order = ref<number>(1);
@@ -49,6 +57,11 @@ const modalScore = ref<boolean>(false);
 const modalCandidate = ref<boolean>(false);
 const modalResult = ref<boolean>(false);
 const selected_row_id = ref<string>("");
+const jobStatus = ref<{
+  candidate?: "running" | "completed" | "failed";
+  score?: "running" | "completed" | "failed";
+  result?: "running" | "completed" | "failed";
+}>({});
 const rowsHistory = ref<ResponseHistoryObject[]>([]); //select data history
 const tittleHistory = ref<string>("ประวัติการนำเข้าข้อมูล"); //
 const filterHistory = ref<string>(""); //search data table history
@@ -62,6 +75,54 @@ const textTittle = ref<string>("");
 const textTittleScore = ref<string>("");
 const textTittleCandidate = ref<string>("");
 const textTittleResult = ref<string>("");
+
+// Dialog message constants
+const UPLOAD_RUNNING_DIALOG = {
+  title: "ไม่สามารถอัปโหลดไฟล์ได้",
+  message: "อยู่ระหว่างนำเข้าข้อมูล ระบบจะแจ้งผลให้ทราบทันทีเมื่อเสร็จสิ้น",
+  icon: "mdi-progress-alert",
+  btnLabel: "ตกลง",
+  color: "primary",
+};
+
+const UPLOAD_SUCCESS_DIALOG = {
+  title: "อัปโหลดไฟล์สำเร็จ",
+  message:
+    "ระบบกำลังนำเข้าข้อมูลคุณสามารถใช้งานเมนูอื่นในระหว่างนี้ได้ โดยระบบจะแจ้งผลการดำเนินการให้ทราบทันทีเมื่อเสร็จสิ้น",
+  icon: "check",
+  btnLabel: "ตกลง",
+  color: "primary",
+};
+
+// Function to show upload running dialog
+function showUploadRunningDialog() {
+  dialogMessage(
+    $q,
+    UPLOAD_RUNNING_DIALOG.title,
+    UPLOAD_RUNNING_DIALOG.message,
+    UPLOAD_RUNNING_DIALOG.icon,
+    UPLOAD_RUNNING_DIALOG.btnLabel,
+    UPLOAD_RUNNING_DIALOG.color,
+    undefined,
+    undefined,
+    true
+  );
+}
+
+// Function to show upload success dialog
+function showUploadSuccessDialog() {
+  dialogMessage(
+    $q,
+    UPLOAD_SUCCESS_DIALOG.title,
+    UPLOAD_SUCCESS_DIALOG.message,
+    UPLOAD_SUCCESS_DIALOG.icon,
+    UPLOAD_SUCCESS_DIALOG.btnLabel,
+    UPLOAD_SUCCESS_DIALOG.color,
+    undefined,
+    undefined,
+    true
+  );
+}
 const rows = ref<ResponseRecruitPeriod[]>([]);
 const rowsData = ref<ResponseRecruitPeriod[]>([]);
 const initialPagination = ref<Pagination>({
@@ -335,9 +396,15 @@ function clickDetail(id: string) {
  * @param id รอบสอบเเข่งขัน
  */
 async function clickUpload(id: string) {
-  modalCandidate.value = true;
-  textTittleCandidate.value = "นำเข้าผู้สมัครสอบแข่งขัน";
   selected_row_id.value = id;
+  const isRunning = await checkJobStatus(id, "candidate");
+
+  if (isRunning) {
+    showUploadRunningDialog();
+  } else {
+    modalCandidate.value = true;
+    textTittleCandidate.value = "นำเข้าผู้สมัครสอบแข่งขัน";
+  }
 }
 
 /**
@@ -345,9 +412,15 @@ async function clickUpload(id: string) {
  * @param id รอบสอบเเข่งขัน
  */
 async function clickEdit(id: string) {
-  modalScore.value = true;
-  textTittleScore.value = "นำเข้าบัญชีรวมคะแนน";
   selected_row_id.value = id;
+  const isRunning = await checkJobStatus(id, "score");
+
+  if (isRunning) {
+    showUploadRunningDialog();
+  } else {
+    modalScore.value = true;
+    textTittleScore.value = "นำเข้าบัญชีรวมคะแนน";
+  }
 }
 
 /**
@@ -355,9 +428,57 @@ async function clickEdit(id: string) {
  * @param id รอบสอบเเข่งขัน
  */
 async function clickResult(id: string) {
-  modalResult.value = true;
-  textTittleResult.value = "นำเข้าไฟล์ผลการสอบ";
   selected_row_id.value = id;
+  const isRunning = await checkJobStatus(id, "result");
+
+  if (isRunning) {
+    showUploadRunningDialog();
+  } else {
+    modalResult.value = true;
+    textTittleResult.value = "นำเข้าไฟล์ผลการสอบ";
+  }
+}
+
+/**
+ * ตรวจสอบสถานะการนำเข้าข้อมูล
+ * @param id รอบสอบเเข่งขัน
+ * @param type ประเภทไฟล์ที่ต้องการตรวจสอบ
+ * @return true ถ้ากำลัง running, false ถ้าไม่มี job หรือ job เสร็จแล้ว
+ */
+async function checkJobStatus(
+  id: string,
+  type: "candidate" | "score" | "result"
+): Promise<boolean> {
+  const uploads = uploadProgress.pendingUploads.filter(
+    (u) => u.periodId === id && u.type === type
+  );
+
+  let hasRunningJob = false;
+
+  for (const upload of uploads) {
+    try {
+      const res = await http.get(config.API.getImportStatus(upload.jobId));
+      const status = res.data.result.status.toLowerCase(); // 'running', 'completed', 'failed'
+
+      if (status === "completed" || status === "failed") {
+        status === "completed" && fetchData();
+        uploadProgress.removeUpload(upload.jobId);
+      } else if (status === "running") {
+        jobStatus.value[type] = "running";
+        hasRunningJob = true;
+      }
+    } catch (e) {
+      // if error, remove from pending
+      uploadProgress.removeUpload(upload.jobId);
+    }
+  }
+
+  // if no running jobs, clear status
+  if (!uploadProgress.isUploading(id, type)) {
+    jobStatus.value[type] = undefined;
+  }
+
+  return hasRunningJob;
 }
 
 /**
@@ -463,11 +584,13 @@ async function checkSaveCandidate() {
   await http
     .post(config.API.uploadCandidates(selected_row_id.value), fd)
     .then((res) => {
-      success($q, "นำเข้าข้อมูลผู้สมัครสอบสำเร็จ");
+      const jobId = res.data.result.jobId;
+      uploadProgress.addUpload(jobId, selected_row_id.value, "candidate");
+      success($q, UPLOAD_SUCCESS_DIALOG.message);
+
       modalCandidate.value = false;
       files_candidate.value = null;
       selected_row_id.value = "";
-      fetchData();
     })
     .catch((e) => {
       messageError($q, e);
@@ -477,7 +600,7 @@ async function checkSaveCandidate() {
     });
 }
 
-/** บันทึด คะเเนน */
+/** บันทึด คะเแนน */
 async function checkSaveScore() {
   const fd = new FormData();
   fd.append("attachment", files_score.value[0]);
@@ -485,11 +608,12 @@ async function checkSaveScore() {
   await http
     .post(config.API.saveScores(selected_row_id.value), fd)
     .then((res) => {
-      success($q, "นำเข้าข้อมูลผลคะแนนสอบสำเร็จ");
+      const jobId = res.data.result.jobId;
+      uploadProgress.addUpload(jobId, selected_row_id.value, "score");
+      success($q, UPLOAD_SUCCESS_DIALOG.message);
       modalScore.value = false;
       files_score.value = null;
       selected_row_id.value = "";
-      fetchData();
     })
     .catch((e) => {
       messageError($q, e);
@@ -507,11 +631,12 @@ async function checkSaveResult() {
   await http
     .post(config.API.uploadResult(selected_row_id.value), fd)
     .then((res) => {
-      success($q, "นำเข้าข้อมูลผลการสอบแข่งขันฯ (บัญชีรายชื่อ)");
+      const jobId = res.data.result.jobId;
+      uploadProgress.addUpload(jobId, selected_row_id.value, "result");
+      success($q, UPLOAD_SUCCESS_DIALOG.message);
       modalResult.value = false;
       files_result.value = null;
       selected_row_id.value = "";
-      fetchData();
     })
     .catch((e) => {
       messageError($q, e);
@@ -532,6 +657,9 @@ async function checkSave() {
   await http
     .post(config.API.saveCandidates, fd)
     .then((res) => {
+      const jobId = res.data.result.jobId;
+      uploadProgress.addUpload(jobId, selected_row_id.value, "period");
+
       success($q, "นำเข้าข้อมูลผู้สมัครสอบแข่งขันสำเร็จ");
       modalAdd.value = false;
       fetchData();
@@ -557,12 +685,18 @@ onMounted(async () => {
   hideLoader();
   await fetchData();
 });
+
+/** Watch notification counter on socket */
+watch(notificationCounter, () => {
+  fetchData();
+});
 </script>
 
 <template>
   <div class="toptitle text-dark col-12 row items-center">
     จัดการรอบสอบแข่งขัน
   </div>
+
   <q-card flat bordered class="col-12 q-mt-sm q-pt-sm q-pa-md">
     <div>
       <Table
@@ -669,16 +803,16 @@ onMounted(async () => {
               </div>
               <div v-else-if="col.name == 'examCount'" class="table_ellipsis2">
                 <q-btn
+                  v-if="
+                    (col.value == null || col.value == '0') &&
+                    checkPermission($route)?.attrIsUpdate
+                  "
                   flat
                   dense
                   size="12px"
                   color="green"
                   round
                   @click.stop.prevent="clickUpload(props.row.id)"
-                  v-if="
-                    (col.value == null || col.value == '0') &&
-                    checkPermission($route)?.attrIsUpdate
-                  "
                 >
                   <q-icon name="mdi-file-excel-outline" size="20px" />
                   <q-tooltip>นำเข้าไฟล์ผู้สมัครสอบ</q-tooltip>
@@ -715,6 +849,9 @@ onMounted(async () => {
               </div>
               <div v-else-if="col.name == 'scoreCount'" class="table_ellipsis2">
                 <q-btn
+                  v-if="
+                    col.value == null && checkPermission($route)?.attrIsUpdate
+                  "
                   :disable="props.row.examCount == 0"
                   flat
                   dense
@@ -722,9 +859,6 @@ onMounted(async () => {
                   round
                   color="green"
                   @click.stop.prevent="clickEdit(props.row.id)"
-                  v-if="
-                    col.value == null && checkPermission($route)?.attrIsUpdate
-                  "
                 >
                   <q-icon name="mdi-file-excel-outline" size="20px" />
                   <!-- นำเข้าไฟล์ผลคะแนนสอบ -->
@@ -751,6 +885,11 @@ onMounted(async () => {
 
               <div v-else-if="col.name == 'result'" class="table_ellipsis2">
                 <q-btn
+                  v-if="
+                    (props.row.score == null ||
+                      props.row.score.resultCount == 0) &&
+                    checkPermission($route)?.attrIsUpdate
+                  "
                   :disable="props.row.score == null"
                   flat
                   dense
@@ -758,11 +897,6 @@ onMounted(async () => {
                   color="green"
                   round
                   @click.stop.prevent="clickResult(props.row.id)"
-                  v-if="
-                    (props.row.score == null ||
-                      props.row.score.resultCount == 0) &&
-                    checkPermission($route)?.attrIsUpdate
-                  "
                 >
                   <q-icon name="mdi-file-excel-outline" size="20px" />
                   <q-tooltip>นำเข้าไฟล์ผลการสอบ (บัญชีรายชื่อ)</q-tooltip>
@@ -921,12 +1055,12 @@ onMounted(async () => {
 
   <q-dialog v-model="modalCandidate" persistent>
     <q-card style="width: 600px">
+      <DialogHeadTemplate
+        :title="textTittleCandidate"
+        :close="clickCloseCandidate"
+        title-type="ข้อมูลผู้สมัครสอบ"
+      />
       <q-form ref="myFormScore">
-        <DialogHeadTemplate
-          :title="textTittleCandidate"
-          :close="clickCloseCandidate"
-          title-type="ข้อมูลผู้สมัครสอบ"
-        />
         <q-separator />
         <q-card-section>
           <div class="col-12 row items-center q-col-gutter-sm">
@@ -965,12 +1099,12 @@ onMounted(async () => {
 
   <q-dialog v-model="modalScore" persistent>
     <q-card style="width: 600px">
+      <DialogHeadTemplate
+        :title="textTittleScore"
+        :close="clickCloseScore"
+        title-type="บัญชีรวมคะแนน"
+      />
       <q-form ref="myFormScore">
-        <DialogHeadTemplate
-          :title="textTittleScore"
-          :close="clickCloseScore"
-          title-type="บัญชีรวมคะแนน"
-        />
         <q-separator />
         <q-card-section>
           <div class="col-12 row items-center q-col-gutter-sm">
@@ -1009,12 +1143,12 @@ onMounted(async () => {
 
   <q-dialog v-model="modalResult" persistent>
     <q-card style="width: 600px">
+      <DialogHeadTemplate
+        :title="textTittleResult"
+        :close="clickCloseResult"
+        title-type="ผลการสอบ (บัญชีรายชื่อ)"
+      />
       <q-form ref="myFormScore">
-        <DialogHeadTemplate
-          :title="textTittleResult"
-          :close="clickCloseResult"
-          title-type="ผลการสอบ (บัญชีรายชื่อ)"
-        />
         <q-separator />
         <q-card-section>
           <div class="col-12 row items-center q-col-gutter-sm">

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

@@ -2,11 +2,13 @@
 import { onMounted, ref, watch, computed } from "vue";
 import { useQuasar, QForm } from "quasar";
 import { useRouter, useRoute } from "vue-router";
+import { storeToRefs } from "pinia";
 
 import http from "@/plugins/http";
 import config from "@/app.config";
 import { useCounterMixin } from "@/stores/mixin";
 import { calculateFiscalYear } from "@/utils/function";
+import { usePositionKeycloakStore } from "@/stores/positionKeycloak";
 
 import type { RequestPeriodCompete } from "@/modules/03_recruiting/interface/request/Period";
 import type {
@@ -16,6 +18,7 @@ import type {
 
 const $q = useQuasar(); // show dialog
 const mixin = useCounterMixin();
+const { dataPositionKeycloak } = storeToRefs(usePositionKeycloakStore());
 const router = useRouter();
 const route = useRoute();
 const {
@@ -53,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() {
@@ -98,6 +102,7 @@ async function fetchData() {
 
       fileDocs.value = files;
       fileImgs.value = images;
+      scoreExpireDate.value = data.scoreExpireDate;
     })
     .catch((e) => {
       messageError($q, e);
@@ -253,6 +258,11 @@ function sendData() {
     year: yearly.value,
     announcementDate:
       dateAnnounce.value !== null ? convertDateToAPI(dateAnnounce.value) : null,
+    scoreExpireDate:
+      scoreExpireDate.value !== null
+        ? convertDateToAPI(scoreExpireDate.value)
+        : null,
+    rootDnaId: !edit.value ? dataPositionKeycloak.value.rootDnaId : undefined,
   };
   return valueData;
 }
@@ -355,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 = [];
@@ -451,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
@@ -466,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"
@@ -501,6 +520,7 @@ onMounted(async () => {
               </template>
             </datepicker>
           </div>
+
           <div class="col-xs-12 col-sm-3 col-md-3">
             <datepicker
               v-model="dateAnnouncement"
@@ -543,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"
@@ -568,6 +589,7 @@ onMounted(async () => {
                     dateRegister != null ? dateThaiRange(dateRegister) : null
                   "
                   :label="`${'วันที่สมัคร'}`"
+                  hide-bottom-space
                 >
                   <template v-slot:prepend>
                     <q-icon
@@ -581,6 +603,7 @@ onMounted(async () => {
               </template>
             </datepicker>
           </div>
+
           <div
             class="col-xs-12 col-sm-3 col-md-3"
             v-if="announcementExam && isFeeNotZero"
@@ -610,6 +633,7 @@ onMounted(async () => {
                   "
                   :label="`${'วันที่ชำระเงิน'}`"
                   :rules="[(val:string) => !!val || `${'กรุณาเลือกวันที่ชำระเงิน'}`]"
+                  hide-bottom-space
                 >
                   <template v-slot:prepend>
                     <q-icon
@@ -632,6 +656,7 @@ onMounted(async () => {
               borderless
               :enableTimePicker="false"
               week-start="0"
+              @update:model-value="onUpdateScoreExpireDate"
             >
               <template #year="{ year }">
                 {{ year + 543 }}
@@ -649,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/DisablePeriod.vue

@@ -309,8 +309,8 @@ async function fetchData(actionType?: string) {
       if (data.length > 0) {
         data.map((r: ResponseRecruitPeriod) => {
           if (r.score != null) {
-            r.scoreCount = r.score.scoreCount;
+            r.scoreCount = r.score.scoreCount ? r.score.scoreCount : 0;
-            r.scoreImportDate = r.score.importDate;
+            r.scoreImportDate = r.score.importDate ? r.score.importDate : "-";
           }
           result.push(r);
         });
@@ -715,7 +715,11 @@ onMounted(async () => {
                   <q-tooltip>นำเข้าไฟล์ผลคะแนนสอบ</q-tooltip>
                 </q-btn>
                 <div v-else>
-                  {{ props.row.score.scoreCount.toLocaleString() }}
+                  {{
+                    props.row.score
+                      ? props.row.score.scoreCount.toLocaleString()
+                      : "-"
+                  }}
                   <q-btn
                     v-if="checkPermission($route)?.attrIsUpdate"
                     dense
@@ -750,7 +754,11 @@ onMounted(async () => {
                   <q-tooltip>นำเข้าไฟล์ผลการสอบ (บัญชีรายชื่อ)</q-tooltip>
                 </q-btn>
                 <div v-else>
-                  {{ props.row.score.resultCount.toLocaleString() }}
+                  {{
+                    props.row.score
+                      ? props.row.score.resultCount.toLocaleString()
+                      : "-"
+                  }}
                   <q-btn
                     v-if="checkPermission($route)?.attrIsUpdate"
                     dense

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

@@ -3,11 +3,13 @@
 import { onMounted, ref, watch } from "vue";
 import { useQuasar, QForm } from "quasar";
 import { useRouter, useRoute } from "vue-router";
+import { storeToRefs } from "pinia";
 
 import http from "@/plugins/http";
 import config from "@/app.config";
 import { useCounterMixin } from "@/stores/mixin";
 import { calculateFiscalYear } from "@/utils/function";
+import { usePositionKeycloakStore } from "@/stores/positionKeycloak";
 
 import type { RequestPeriodDisable } from "@/modules/03_recruiting/interface/request/Period";
 import type {
@@ -17,6 +19,7 @@ import type {
 
 const $q = useQuasar(); // show dialog
 const mixin = useCounterMixin();
+const { dataPositionKeycloak } = storeToRefs(usePositionKeycloakStore());
 const router = useRouter();
 const route = useRoute();
 const {
@@ -44,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[]>([]);
@@ -90,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);
@@ -159,6 +163,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,
   };
   return valueData;
 }
@@ -348,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 = [];
 });
@@ -386,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
@@ -398,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
@@ -409,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"
@@ -431,6 +452,7 @@ onMounted(async () => {
                   :model-value="yearly + 543"
                   :rules="[(val:string) => !!val || `${'กรุณาเลือกปีงบประมาณ'}`]"
                   :label="`${'ปีงบประมาณ'}`"
+                  hide-bottom-space
                 >
                   <template v-slot:prepend>
                     <q-icon
@@ -456,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">
@@ -480,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
@@ -513,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
@@ -550,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
@@ -590,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
@@ -618,6 +645,7 @@ onMounted(async () => {
               borderless
               :enableTimePicker="false"
               week-start="0"
+              @update:model-value="onUpdateScoreExpireDate"
             >
               <template #year="{ year }">
                 {{ year + 543 }}
@@ -629,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">
+          <div class="col-xs-12 col-sm-3 col-md-3" v-if="announcementExam">
-              <q-input
+            <datepicker
-                outlined
+              v-model="scoreExpireDate"
-                v-model="graduationYearLock"
+              :locale="'th'"
-                label="ล็อกวันที่สำเร็จการศึกษา (ปี)"
+              autoApply
-                dense
+              :readonly="checkRoutePermisson"
-                :readonly="checkRoutePermisson"
+              borderless
-                lazy-rules
+              :enableTimePicker="false"
-                :rules="[
+              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"
+              type="number"
-              ></q-input>
+            ></q-input>
-            </div>
           </div>
 
           <div class="col-12" v-if="announcementExam">

src/modules/04_registryPerson/components/detail/GovernmentInformation/02_Discipline.vue

@@ -16,9 +16,11 @@ import type {
   DisciplineOps,
   DataOption,
 } from "@/modules/04_registryPerson/interface/index/discipline";
+import type { Discipline } from "@/modules/04_registryPerson/interface/response/Discipline";
 
 import DialogHeader from "@/components/DialogHeader.vue";
 import DialogHistory from "@/modules/04_registryPerson/components/detail/DialogHistory.vue";
+import DialogPreviewCommand from "@/modules/18_command/components/DialogPreviewCommand.vue";
 
 const route = useRoute();
 const $q = useQuasar();
@@ -47,6 +49,9 @@ const empType = ref<string>(pathRegistryEmp(route.name?.toString() ?? ""));
 const isLeave = defineModel<boolean>("isLeave", {
   required: true,
 });
+const citizenId = defineModel<string>("citizenId", {
+  required: true,
+});
 
 const baseColumns = ref<QTableColumn[]>([
   {
@@ -152,8 +157,8 @@ const baseVisibleColumns = ref<string[]>([
   "lastUpdatedAt",
 ]);
 
-const rows = ref<RequestItemsObject[]>([]); //รายการวินัย
+const rows = ref<Discipline[]>([]); //รายการวินัย
-const rowsMain = ref<RequestItemsObject[]>([]); //รายการวินัย
+const rowsMain = ref<Discipline[]>([]); //รายการวินัย
 const mode = ref<string>("table"); //การแสดงผล Table card
 const filterKeyword = ref<string>(""); //คำค้นหา
 
@@ -244,6 +249,10 @@ const fileUpload = ref<File | null>(null);
 const fileData = ref<ResFileData | null>(null);
 const isUpload = ref<boolean>(false);
 
+const modalCommand = ref<boolean>(false);
+const command = ref<string>("");
+const commandId = ref<string>("");
+
 /**
  * function ค้นหา คำใน option
  * @param val คำค้นหา
@@ -305,7 +314,7 @@ async function fetchData(id: string) {
  * กดเลือกข้อมูลที่จะแก้ไข
  * @param props ค่า props ใน row ที่เลือก
  */
-async function openDialogEdit(props: RequestItemsObject) {
+async function openDialogEdit(props: Discipline) {
   showLoader();
   try {
     modal.value = true;
@@ -478,6 +487,12 @@ function handleDelete(id: string) {
   });
 }
 
+function openViewCommand(data: Discipline) {
+  command.value = data.refCommandNo;
+  commandId.value = data.refCommandId;
+  modalCommand.value = true;
+}
+
 /** ทำงานเมื่อ Components ถูกเรียกใช้งาน*/
 onMounted(() => {
   fetchData(profileId.value);
@@ -621,7 +636,19 @@ onMounted(() => {
           :key="col.id"
           :class="props.row.isEntry ? 'text-grey' : ''"
         >
-          <div>
+          <div
+            v-if="col.name == 'refCommandNo' && props.row.refCommandId"
+            @click="col.value ? openViewCommand(props.row) : null"
+            :class="
+              col.value
+                ? 'table_ellipsis text-blue cursor-pointer'
+                : 'table_ellipsis'
+            "
+          >
+            {{ col.value ? col.value : "-" }}
+            <q-tooltip v-if="col.value">ดูคำสั่ง</q-tooltip>
+          </div>
+          <div v-else>
             {{ col.value ? col.value : "-" }}
           </div>
         </q-td>
@@ -975,6 +1002,13 @@ onMounted(() => {
     :visible-columns="visibleColumnsHistory"
     :fetch-data="fetchDataHistory"
   />
+
+  <DialogPreviewCommand
+    v-model:modal="modalCommand"
+    v-model:command="command"
+    v-model:command-id="commandId"
+    :citizen-id="citizenId"
+  />
 </template>
 
 <style scoped></style>

src/modules/04_registryPerson/components/detail/GovernmentInformation/06_HelpGovernment.vue

@@ -866,7 +866,8 @@ onMounted(() => {
                     outlined
                     dense
                     :model-value="date2Thai(formData.dateEnd)"
-                    :rules="[(val:string) => !!val || `${'กรุณาเลือก วันที่สิ้นสุด'}`]"
+                    clearable
+                    @clear="formData.dateEnd = null"
                     hide-bottom-space
                     :label="`${'วันที่สิ้นสุด'}`"
                   >

src/modules/04_registryPerson/components/detail/GovernmentInformation/Main.vue

@@ -58,7 +58,10 @@ const storeRegistry = useRegistryNewDataStore();
       <Info :is-leave="storeRegistry.isLeave" />
     </q-tab-panel>
     <q-tab-panel name="2">
-      <Discipline :is-leave="storeRegistry.isLeave" />
+      <Discipline
+        :is-leave="storeRegistry.isLeave"
+        :citizen-id="storeRegistry.citizenId"
+      />
     </q-tab-panel>
     <q-tab-panel name="3">
       <Leave :is-leave="storeRegistry.isLeave" />

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",
@@ -408,7 +408,8 @@ function calculateMinDate() {
 
 function prefixRankRule() {
   return [
-    () => !!formData.rank || !!formData.prefix || "กรุณาเลือกคำนำหน้าชื่อ หรือยศ",
+    () =>
+      !!formData.rank || !!formData.prefix || "กรุณาเลือกคำนำหน้าชื่อ หรือยศ",
   ];
 }
 
@@ -588,6 +589,8 @@ onMounted(() => {
 
             <div class="col-xs-6 col-sm-6 col-md-6">
               <q-select
+                :readonly="checkPermission($route)?.attrOwnership !== 'OWNER'"
+                  :class="checkPermission($route)?.attrOwnership === 'OWNER' ? 'inputgreen' : ''"
                 dense
                 outlined
                 use-input
@@ -602,7 +605,6 @@ onMounted(() => {
                 option-value="name"
                 v-model="formData.prefix"
                 clearable
-                class="inputgreen"
                 :options="store.Ops.prefixOps"
                 :label="dataLabel.prefix"
                 :rules="prefixRankRule()"
@@ -640,24 +642,24 @@ onMounted(() => {
             </div>
             <div class="col-xs-6 col-sm-6 col-md-6">
               <q-input
+                :readonly="checkPermission($route)?.attrOwnership !== 'OWNER'"
                 dense
                 outlined
                 lazy-rules
                 hide-bottom-space
                 v-model="formData.firstName"
-                class="inputgreen"
                 :label="dataLabel.firstName"
                 :rules="[(val: string) => !!val || `${'กรุณากรอก ชื่อ'}`]"
               />
             </div>
             <div class="col-xs-6 col-sm-6 col-md-6">
               <q-input
+                :readonly="checkPermission($route)?.attrOwnership !== 'OWNER'"
                 dense
                 outlined
                 lazy-rules
                 hide-bottom-space
                 v-model="formData.lastName"
-                class="inputgreen"
                 :label="dataLabel.lastName"
                 :rules="[(val: string) => !!val || `${'กรุณากรอก นามสกุล'}`]"
               />
@@ -721,6 +723,7 @@ onMounted(() => {
             </div>
             <div class="col-xs-6 col-sm-6 col-md-6">
               <q-select
+                :readonly="checkPermission($route)?.attrOwnership !== 'OWNER'"
                 dense
                 outlined
                 use-input
@@ -735,7 +738,6 @@ onMounted(() => {
                 option-label="name"
                 option-value="name"
                 v-model="formData.gender"
-                class="inputgreen"
                 :options="store.Ops.genderOps"
                 :label="dataLabel.gender"
                 @filter="(inputValue: string,

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

@@ -59,6 +59,7 @@ const changeNameData = reactive<FormChangeName>({
   profileId: profileId.value,
   prefixId: "", // id คำนำหน้า
   prefix: "", // คำนำหน้า
+  rank: "", // ยศ
   firstName: "", // ชื่อ
   lastName: "", // นามสกุล
   status: "", // สถานะ
@@ -69,11 +70,13 @@ const selection = ref<string[]>([]); // ตัวเลือก
 const prefixChange = ref<string | null | undefined>(""); // เปลี่ยนคำนำหน้า
 const firstNameChange = ref<string | null | undefined>(""); // เปลียนชื่อ
 const lastNameChange = ref<string | null | undefined>(""); // เปลี่ยนนามสกุล
+const rankChange = ref<string | null | undefined>(""); // เปลี่ยนยศ
 
 const profileInfo = ref<DataProfile>(); // ข้อมูล Profile
 
 const statusOption = ref<string[]>([
   "เปลี่ยนคำนำหน้าชื่อ",
+  "เปลี่ยนยศ",
   "เปลี่ยนชื่อ",
   "เปลี่ยนนามสกุล",
   "เปลี่ยนชื่อ-นามสกุล",
@@ -84,6 +87,7 @@ const statusOption = ref<string[]>([
 const statusOptionFilter = ref<string[]>([
   "เปลี่ยนคำนำหน้าชื่อ",
   "เปลี่ยนชื่อ",
+  "เปลี่ยนยศ",
   "เปลี่ยนนามสกุล",
   "เปลี่ยนชื่อ-นามสกุล",
   "เปลี่ยนคำนำหน้าชื่อ และชื่อ",
@@ -107,6 +111,17 @@ const columns = ref<QTableProps["columns"]>([
     sort: (a: string, b: string) =>
       a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
   },
+  {
+    name: "rank",
+    align: "left",
+    label: "ยศ",
+    sortable: true,
+    field: "rank",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
   {
     name: "firstName",
     align: "left",
@@ -156,6 +171,7 @@ const columns = ref<QTableProps["columns"]>([
 ]);
 const visibleColumns = ref<string[]>([
   "prefix",
+  "rank",
   "firstName",
   "lastName",
   "lastUpdateFullName",
@@ -215,6 +231,7 @@ function onSubmit() {
             firstName: changeNameData.firstName,
             lastName: changeNameData.lastName,
             status: changeNameData.status,
+            rank: changeNameData.rank,
             documentId: changeNameData.documentId,
           })
           .then(async (res) => {
@@ -346,6 +363,14 @@ function filterSelector(val: string, update: Function, refData: string) {
         );
       });
       break;
+
+    case "rankOps":
+      update(() => {
+        store.Ops.rankOps = store.OpsFilter.rankOps.filter(
+          (v: DataOption) => v.name.indexOf(val) > -1
+        );
+      });
+      break;
     default:
       break;
   }
@@ -390,12 +415,14 @@ watch(
     changeNameData.prefix,
     changeNameData.firstName,
     changeNameData.lastName,
+    changeNameData.rank,
   ],
   () => {
     submitDisable.value =
       changeNameData.prefix === prefixChange.value &&
       changeNameData.firstName === firstNameChange.value &&
-      changeNameData.lastName === lastNameChange.value;
+      changeNameData.lastName === lastNameChange.value &&
+      changeNameData.rank === rankChange.value;
   }
 );
 
@@ -411,6 +438,9 @@ watch(
     if (!selection.value.includes("lastname")) {
       changeNameData.lastName = lastNameChange.value;
     }
+    if (!selection.value.includes("rank")) {
+      changeNameData.rank = rankChange.value;
+    }
   }
 );
 /** ทำงานเมื่อ Components ถูกเรียกใช้งาน*/
@@ -448,9 +478,11 @@ onMounted(async () => {
           changeNameData.prefix = profileInfo?.prefixMain;
           changeNameData.firstName = profileInfo?.firstName;
           changeNameData.lastName = profileInfo?.lastName;
+          changeNameData.rank = profileInfo?.rank;
           prefixChange = changeNameData.prefix;
           firstNameChange = changeNameData.firstName;
           lastNameChange = changeNameData.lastName;
+          rankChange = changeNameData.rank;
           changeNameData.status = '';
           dialogStatus = 'create';
           submitDisable = true;
@@ -533,7 +565,7 @@ onMounted(async () => {
           :class="props.row.isEntry ? 'text-grey' : ''"
         >
           <div class="table_ellipsis">
-            {{ col.value }}
+            {{ col.value ? col.value : "-" }}
           </div>
         </q-td>
 
@@ -563,12 +595,17 @@ onMounted(async () => {
           <div class="row q-mb-sm">
             <div class="col-12">
               <div class="row">
-                <div class="q-gutter-sm">
+                <div class="q-col-gutter-sm">
                   <q-checkbox
                     v-model="selection"
                     val="prefix"
                     label="เปลี่ยนคำนำหน้าชื่อ"
                   />
+                  <q-checkbox
+                    v-model="selection"
+                    val="rank"
+                    label="เปลี่ยนยศ"
+                  />
                   <q-checkbox
                     v-model="selection"
                     val="firstname"
@@ -609,6 +646,30 @@ onMounted(async () => {
                     ) "
               />
             </div>
+            <div class="col">
+              <q-select
+                :readonly="!selection.includes('rank')"
+                v-model="changeNameData.rank"
+                :options="store.Ops.rankOps"
+                label="ยศ"
+                dense
+                :class="!selection.includes('rank') ? '' : 'inputgreen'"
+                outlined
+                use-input
+                hide-selected
+                fill-input
+                lazy-rules
+                emit-value
+                map-options
+                hide-bottom-space
+                input-debounce="0"
+                option-label="name"
+                option-value="name"
+                @filter="(inputValue:string,
+                    doneFn:Function) => filterSelector(inputValue, doneFn,'rankOps'
+                    ) "
+              />
+            </div>
             <div class="col">
               <q-input
                 :readonly="!selection.includes('firstname')"

src/modules/04_registryPerson/interface/request/Main.ts

@@ -66,6 +66,7 @@ interface FormChangeName {
   profileId: string;
   prefixId: string | null | undefined;
   prefix: string | null | undefined;
+  rank: string | null | undefined;
   firstName: string | null | undefined;
   lastName: string | null | undefined;
   status: string | null | undefined;

src/modules/04_registryPerson/interface/response/Discipline.ts

@@ -0,0 +1,23 @@
+interface Discipline {
+  createdAt: Date | null;
+  createdFullName: string;
+  createdUserId: string;
+  date: Date | null;
+  detail: string;
+  id: string;
+  isDeleted: false;
+  isEntry: false;
+  isUpload: true;
+  lastUpdateFullName: string;
+  lastUpdateUserId: string;
+  lastUpdatedAt: Date | null;
+  level: string;
+  profileEmployeeId: string;
+  profileId: string;
+  refCommandDate: Date | null;
+  refCommandNo: string;
+  refCommandId: string;
+  unStigma: string;
+}
+
+export type { Discipline };

src/modules/04_registryPerson/store.ts

@@ -25,8 +25,7 @@ export const useRegistryNewDataStore = defineStore("registryNew", () => {
       {
         id: "posNo",
         name:
-          route.name === "registryNew" ||
+          route.name === "registryNew" || route.name === "registryRetireOfficer"
-          route.name === "registryRetireOfficer"
             ? "เลขที่ตำแหน่ง"
             : "ตำแหน่งเลขที่",
       },
@@ -130,6 +129,8 @@ export const useRegistryNewDataStore = defineStore("registryNew", () => {
         return "ให้ออกจากราชการ";
       case "DISCIPLINE_TEMP_SUSPEND":
         return "ให้ออกจากราชการไว้ก่อน";
+      case "RETIRE_MILITARY":
+        return "ลาออกเพื่อไปรับราชการทหาร";
       default:
         return "";
     }

src/modules/04_registryPerson/views/detailView.vue

@@ -121,7 +121,8 @@ const itemsMenu = computed(() => {
   if (
     leaveType.value === "DISCIPLINE_TEMP_SUSPEND" ||
     leaveType.value === "RETIRE_RESIGN" ||
-    leaveType.value === "DISCIPLINE_SUSPEND"
+    leaveType.value === "DISCIPLINE_SUSPEND" ||
+    leaveType.value === "RETIRE_MILITARY"
   ) {
     return (
       baseItemsMenu.value?.filter(
@@ -323,10 +324,10 @@ async function uploadFileURL(uploadUrl: string, file: any) {
  * ฟังก์ชันดึงข้อมูลรูปโปรไฟล์
  * @param id โปรไฟล์
  */
-async function fetchProfile(id: string) {
+function fetchProfile(id: string) {
-  await http
+  http
     .get(config.API.fileByFile("ทะเบียนประวัติ", "โปรไฟล์", id, fileName.value))
-    .then(async (res) => {
+    .then((res) => {
       profilePicture.value = res.data.downloadUrl;
     })
     .catch(() => {
@@ -403,7 +404,7 @@ async function fetchDataPersonal() {
 
       fileName.value = res.data.result.avatarName;
       if (formDetail.value?.avatarName) {
-        await fetchProfile(profileId.value);
+        fetchProfile(profileId.value);
       } else {
         profilePicture.value = avatar;
       }
@@ -857,7 +858,8 @@ onMounted(async () => {
             ])) ||
           leaveType === 'DISCIPLINE_TEMP_SUSPEND' ||
           leaveType === 'RETIRE_RESIGN' ||
-          leaveType === 'DISCIPLINE_SUSPEND'
+          leaveType === 'DISCIPLINE_SUSPEND' ||
+          leaveType === 'RETIRE_MILITARY'
         "
         size="md"
         rounded

src/modules/04_registryPerson/views/edit/components/Table.vue

@@ -437,66 +437,6 @@ function classColorRow(isDelete: boolean, isEdit: boolean, isEntry: boolean) {
 /** ฟังก์ชันดาวน์โหลดไฟล Excel */
 function exportToExcel() {
   exportToExcelPosition(rows.value);
-  // const newData = rows.value.map((e: DataPosition) => {
-  //   return {
-  //     commandDateAffect: date2Thai(e.commandDateAffect),
-  //     positionName: e.positionName,
-  //     positionType: e.positionType,
-  //     positionLevel: e.positionLevel
-  //       ? e.positionLevel
-  //       : e.positionCee
-  //       ? e.positionCee
-  //       : "",
-  //     positionExecutive: e.positionExecutive,
-  //     amount: e.amount,
-  //     mouthSalaryAmount: e.mouthSalaryAmount,
-  //     positionSalaryAmount: e.positionSalaryAmount,
-  //     organization: findOrgName({
-  //       root: e.orgRoot,
-  //       child1: e.orgChild1,
-  //       child2: e.orgChild2,
-  //       child3: e.orgChild3,
-  //       child4: e.orgChild4,
-  //     }),
-  //     posNo:
-  //       e.posNoAbb && e.posNo
-  //         ? `${e.posNoAbb} ${e.posNo}`
-  //         : e.posNo
-  //         ? e.posNo
-  //         : "",
-  //     posNumCodeSit:
-  //       e.posNumCodeSitAbb && e.posNumCodeSit
-  //         ? `${e.posNumCodeSit} (${e.posNumCodeSitAbb})`
-  //         : e.posNumCodeSit
-  //         ? e.posNumCodeSit
-  //         : "",
-  //     commandNo:
-  //       e.commandNo && e.commandYear
-  //         ? `${e.commandNo}/${Number(e.commandYear) + 543}`
-  //         : "",
-  //     commandDateSign: date2Thai(e.commandDateSign),
-  //     commandCode: store.convertCommandCodeName(e.commandCode),
-  //     remark: e.remark,
-  //   };
-  // });
-
-  // const headers = columns.value.map((item: any) => item.label) || []; // หัวคอลัมน์ภาษาไทย
-  // const worksheet = XLSX.utils.json_to_sheet(newData, {
-  //   header: visibleColumns.value,
-  // });
-
-  // //แทรกหัวคอลัมน์ภาษาไทย (ใช้ A1, B1, C1 แทน)
-  // XLSX.utils.sheet_add_aoa(worksheet, [headers], { origin: "A1" });
-
-  // // Create a new workbook and append the worksheet
-  // const workbook = XLSX.utils.book_new();
-
-  // XLSX.utils.book_append_sheet(
-  //   workbook,
-  //   worksheet,
-  //   `รายการประวัติตำแหน่งเงินเดือน`
-  // );
-  // XLSX.writeFile(workbook, "รายการประวัติตำแหน่งเงินเดือน.xlsx");
 }
 
 const commandCodeOptions = ref<DataOption[]>(store.commandCodeData); //รายการปรเภทคำสั่ง
@@ -931,6 +871,29 @@ function onCancelUpload() {
   excelPreviewModal.value = false;
 }
 
+/** ฟังก์ชันจัดเรียงข้อมูลตามวันที่*/
+function handleSortByDate() {
+  dialogConfirm(
+    $q,
+    async () => {
+      try {
+        showLoader();
+        await http.put(config.API.sortOrderByDate, {
+          type: empType.value.toLocaleUpperCase(),
+          profileId: profileId.value,
+        });
+        await fetchData();
+      } catch (error) {
+        messageError($q, error);
+      } finally {
+        hideLoader();
+      }
+    },
+    "ยืนยันการจัดลำดับ",
+    "ต้องการยืนยันการจัดลำดับข้อมูลตามวันที่คำสั่งมีผลใช่หรือไม่?"
+  );
+}
+
 onMounted(async () => {
   await Promise.all([fetchData(), fetchType()]);
 });
@@ -966,8 +929,23 @@ onMounted(async () => {
           icon="mdi-sort"
           @click="modalSort = true"
         >
-          <q-tooltip>จัดลำดับข้อมูล</q-tooltip></q-btn
+          <q-tooltip>จัดลำดับข้อมูล</q-tooltip>
+        </q-btn>
+
+        <q-btn
+          v-if="
+            tabs === 'PENDING' && statusCheckEdit == 'PENDING' && isConfirmEdit
+          "
+          class="q-ml-sm"
+          round
+          flat
+          dense
+          color="indigo-5"
+          icon="mdi-calendar-export"
+          @click="handleSortByDate()"
         >
+          <q-tooltip>จัดลำดับตามวันที่คำสั่งมีผล</q-tooltip>
+        </q-btn>
         <q-space />
         <div>
           <q-btn

src/modules/05_placement/components/Help-Government/HelpGovernmentDetail.vue

@@ -316,9 +316,10 @@ onMounted(() => {
                       :model-value="
                         dateEnd !== null ? date2Thai(dateEnd) : null
                       "
-                      :rules="edit ? [(val:string) => !!val || `${'กรุณาเลือกตั้งแต่วัน'}`]:[]"
                       hide-bottom-space
                       :label="`${'ถึงวันที่'}`"
+                      clearable
+                      @clear="dateEnd = null"
                     >
                       <template v-slot:prepend>
                         <q-icon

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/PersonalList/DialogOrders.vue

@@ -242,7 +242,7 @@ watch(
                 v.code === "C-PM-04" ||
                 v.code === "C-PM-06")) ||
             ((status?.examTypeName === "สอบคัดเลือก" ||
-              status?.examTypeName === "คัดเลือกคนพิการ") &&
+              status?.examTypeName === "คัดเลือกอื่นๆ") &&
               (v.code === "C-PM-02" ||
                 v.code === "C-PM-03" ||
                 v.code === "C-PM-04" ||

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

@@ -165,7 +165,9 @@ async function fetchDataTable(id: string, level: number = 0) {
           (e) => e !== props.dataRow?.posmasterId
         );
 
-        positionNo.value = posMain.filter((e: DataPositionNo) => !newUse.includes(e.id));
+        positionNo.value = posMain.filter(
+          (e: DataPositionNo) => !newUse.includes(e.id)
+        );
       } else {
         positionNo.value = posMain.filter(
           (e: DataPositionNo) => !positionUse.value.includes(e.id)
@@ -241,6 +243,7 @@ async function onClickSubmit() {
         posLevelId: selectedPos.value[0].posLevelId, //ชื่อตำแหน่ง
         posLevelName: selectedPos.value[0].posLevelName, //ชื่อตำแหน่ง
         posExecutiveName: selectedPos.value[0].posExecutiveName,
+        posExecutiveId: selectedPos.value[0].posExecutiveId,
         reportingDate: convertDateToAPI(datePos.value),
         posmasterId: dataPosMaster.id,
         positionExecutiveField: selectedPos.value[0].positionExecutiveField, //ด้านทางการบริหาร
@@ -290,7 +293,10 @@ watch(
     if (modal.value) {
       await fetchPositionUes();
       if (props?.dataRow?.node !== null && props?.dataRow?.nodeId !== null) {
-        await fetchPosFind(props?.dataRow?.node ?? 0, props?.dataRow?.nodeId ?? "");
+        await fetchPosFind(
+          props?.dataRow?.node ?? 0,
+          props?.dataRow?.nodeId ?? ""
+        );
       } else {
         expanded.value = [];
       }
@@ -345,7 +351,7 @@ function onPosType() {
 watch(
   [isAll, isBlank, () => isPosition.value],
   ([newAll, newBlank, newPos], [oldAll, oldBlank, oldPos]) => {
-    const shouldFetch = (newAll !== oldAll) || (newBlank !== oldBlank);
+    const shouldFetch = newAll !== oldAll || newBlank !== oldBlank;
     const isSelectMode = newPos === "select" && oldPos !== "select";
 
     if (shouldFetch || isSelectMode) {

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

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { ref, onMounted, watch, reactive, computed } from "vue";
+import { ref, onMounted, watch, reactive, computed, type PropType } from "vue";
 import { useQuasar, QForm } from "quasar";
 
 import http from "@/plugins/http";
@@ -48,7 +48,7 @@ const {
 /** รับค่ามาจากหน้าหลัก */
 const props = defineProps({
   statCard: {
-    type: Function,
+    type: Function as PropType<() => Promise<void>>,
     default: () => console.log("getStat"),
   },
 });

src/modules/05_placement/components/Receive/DialogOrders.vue

@@ -20,7 +20,7 @@ const dataMapToSend = computed(() => {
   return selected.value.map((i: any) => ({
     id: i.id,
     profileId: i.profileId,
-    prefix: i.prefix,
+    prefix: i.rank ? i.rank : i.prefix,
     firstName: i.firstName,
     lastName: i.lastName,
     citizenId: i.citizenId,
@@ -89,7 +89,9 @@ const columns2 = ref<QTableProps["columns"]>([
     sort: (a: string, b: string) =>
       a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
     format(val, row) {
-      return `${row.prefix ?? ""}${row.firstName ?? ""} ${row.lastName ?? ""}`;
+      return `${row.rank ? row.rank : row.prefix ?? ""}${row.firstName ?? ""} ${
+        row.lastName ?? ""
+      }`;
     },
   },
   {
@@ -110,9 +112,11 @@ const columns2 = ref<QTableProps["columns"]>([
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
     format(val, row) {
-      return row.positionTypeOld
+      return row.positionTypeOld && row.positionTypeOl !== "-"
         ? `${row.positionTypeOld}${
-            row.positionLevelOld ? `(${row.positionLevelOld})` : ""
+            row.positionLevelOld && row.positionLevelOld !== "-"
+              ? `(${row.positionLevelOld})`
+              : ""
           }`
         : "";
     },

src/modules/05_placement/components/Receive/ReceiveAddPerson.vue

@@ -48,6 +48,7 @@ const informaData = ref<FormAddPerson>({
   employeeType: null,
   employeeClass: null,
   profileType: null,
+  rank: "",
 });
 
 // รายการข้อมูลทั้งหมด
@@ -60,6 +61,7 @@ const Ops = ref<InformationOps>({
   religionOps: [],
   employeeClassOps: [],
   employeeTypeOps: [],
+  rankOps: [],
 });
 // ข้อมูลเมื่อเลือกแล้ว
 const OpsFilter = ref<InformationOps>({
@@ -71,6 +73,7 @@ const OpsFilter = ref<InformationOps>({
   religionOps: [],
   employeeClassOps: [],
   employeeTypeOps: [],
+  rankOps: [],
 });
 
 // รูป profile
@@ -135,6 +138,16 @@ async function fetchPerson() {
       });
       Ops.value.religionOps = optionreligions;
       OpsFilter.value.religionOps = optionreligions;
+
+      let rank: DataOption[] = [];
+      data.rank.map((r: DataOptioninfo) => {
+        rank.push({
+          id: r.id.toString(),
+          name: r.name.toString(),
+        });
+      });
+      Ops.value.rankOps = rank;
+      OpsFilter.value.rankOps = rank;
     })
     .catch((e) => {
       messageError($q, e);
@@ -204,7 +217,13 @@ function filterSelector(val: string, update: Function, refData: string) {
         );
       });
       break;
-
+    case "rankOps":
+      update(() => {
+        Ops.value.rankOps = OpsFilter.value.rankOps.filter(
+          (v: DataOption) => v.name.toLowerCase().indexOf(newVal) > -1
+        );
+      });
+      break;
     default:
       break;
   }
@@ -227,7 +246,7 @@ function onSubmit() {
   if (fileData.value != null) formData.append("File", fileData.value); //แก้ไขรูป
   if (informaData.value.citizenId != undefined)
     formData.append("citizenId", informaData.value.citizenId);
-  if (informaData.value.prefix != undefined)
+  if (informaData.value.prefix != undefined && informaData.value.prefix != "")
     formData.append("prefix", informaData.value.prefix);
   if (informaData.value.firstName != undefined)
     formData.append("firstName", informaData.value.firstName);
@@ -256,6 +275,8 @@ function onSubmit() {
     formData.append("employeeType", informaData.value.employeeType);
   if (informaData.value.employeeClass != undefined)
     formData.append("employeeClass", informaData.value.employeeClass);
+  if (informaData.value.rank != undefined && informaData.value.rank != "")
+    formData.append("rank", informaData.value.rank);
 
   dialogConfirm($q, async () => {
     showLoader();
@@ -289,6 +310,15 @@ function updateBirthDate(v: Date) {
   age.value = calculateAge(v);
 }
 
+function prefixRankRule() {
+  return [
+    () =>
+      !!informaData.value.rank ||
+      !!informaData.value.prefix ||
+      "กรุณาเลือกคำนำหน้าชื่อ หรือยศ",
+  ];
+}
+
 /**
  * ทำงานเมื่อมีการเรียกใช้ Components
  */
@@ -383,7 +413,7 @@ onMounted(async () => {
             </div>
             <q-card-section class="q-px-lg">
               <div class="row q-col-gutter-sm">
-                <div class="col-3">
+                <div class="col-2">
                   <q-input
                     bg-color="white"
                     outlined
@@ -404,13 +434,14 @@ onMounted(async () => {
                     mask="#############"
                   />
                 </div>
-                <div class="col-3">
+                <div class="col-2">
                   <q-select
                     bg-color="white"
                     v-model="informaData.prefix"
                     label="คำนำหน้าชื่อ"
                     outlined
                     dense
+                    clearable
                     lazy-rules
                     class="inputgreen"
                     :options="Ops.prefixOps"
@@ -418,11 +449,8 @@ onMounted(async () => {
                     option-value="name"
                     map-options
                     hide-bottom-space
-                    :rules="[
+                    :rules="prefixRankRule()"
-                      (val:string) => {
+                    reactive-rules
-                        return val.length > 0 || 'กรุณาเลือกคำนำหน้าชื่อ';
-                      },
-                    ]"
                     emit-value
                     use-input
                     hide-selected
@@ -432,6 +460,32 @@ onMounted(async () => {
                     )"
                   />
                 </div>
+                <div class="col-2">
+                  <q-select
+                    bg-color="white"
+                    v-model="informaData.rank"
+                    label="ยศ"
+                    outlined
+                    dense
+                    lazy-rules
+                    clearable
+                    class="inputgreen"
+                    :options="Ops.rankOps"
+                    option-label="name"
+                    option-value="name"
+                    map-options
+                    hide-bottom-space
+                    :rules="prefixRankRule()"
+                    reactive-rules
+                    emit-value
+                    use-input
+                    hide-selected
+                    fill-input
+                    @filter="(inputValue:string,
+                    doneFn: Function) => filterSelector(inputValue, doneFn, 'rankOps'
+                    )"
+                  />
+                </div>
                 <div class="col-3">
                   <q-input
                     bg-color="white"

src/modules/05_placement/components/Receive/receiveDetail.vue

@@ -113,6 +113,7 @@ const Ops = ref<InformationOps>({
     { id: "gov", name: "งบประมาณเงินอุดหนุนรัฐบาล" },
     { id: "bkk", name: "งบประมาณกรุงเทพมหานคร" },
   ],
+  rankOps: [],
 });
 const OpsFilter = ref<InformationOps>({
   prefixOps: [],
@@ -129,6 +130,7 @@ const OpsFilter = ref<InformationOps>({
     { id: "gov", name: "งบประมาณเงินอุดหนุนรัฐบาล" },
     { id: "bkk", name: "งบประมาณกรุงเทพมหานคร" },
   ],
+  rankOps: [],
 });
 
 /** ฟังก์ชันดึงข้อมูลรายการข้อมูลเกี่ยวกับบุคคล (dropdown list)*/
@@ -186,6 +188,16 @@ async function fetchPerson() {
       });
       Ops.value.religionOps = optionreligions;
       OpsFilter.value.religionOps = optionreligions;
+
+      let rank: DataOption[] = [];
+      data.rank.map((r: DataOptioninfo) => {
+        rank.push({
+          id: r.id.toString(),
+          name: r.name.toString(),
+        });
+      });
+      Ops.value.rankOps = rank;
+      OpsFilter.value.rankOps = rank;
     })
     .catch((e) => {
       messageError($q, e);
@@ -215,9 +227,9 @@ async function getData() {
       }
       rows.value = list;
       profileId.value = data.profileId;
-      title.value.fullname = `${data.prefix ?? ""}${data.firstName ?? ""} ${
+      title.value.fullname = `${data.rank ? data.rank : data.prefix ?? ""}${
-        data.lastName ?? ""
+        data.firstName ?? ""
-      }`;
+      } ${data.lastName ?? ""}`;
       title.value.organizationPositionOld = data.organizationPositionOld ?? "-";
       title.value.positionLevelOld = data.positionLevelOld ?? "-";
       title.value.positionTypeOld = data.positionTypeOld ?? "-";
@@ -230,6 +242,7 @@ async function getData() {
           (data.prefix == "00000000-0000-0000-0000-000000000000"
             ? null
             : data.prefix) ?? "",
+        rank: data.rank ?? "",
         firstname: data.firstName ?? "",
         lastname: data.lastName ?? "",
         birthDate:
@@ -295,6 +308,7 @@ async function fetchData(data: any) {
       (data.prefix == "00000000-0000-0000-0000-000000000000"
         ? null
         : data.prefix) ?? "",
+    rank: data.rank ?? "",
     firstname: data.firstName ?? "",
     lastname: data.lastName ?? "",
     birthDate: data.dateOfBirth !== null ? new Date(data.dateOfBirth) : null,
@@ -436,6 +450,14 @@ function filterSelector(val: string, update: Function, refData: string) {
       });
       break;
 
+    case "rankOps":
+      update(() => {
+        Ops.value.rankOps = OpsFilter.value.rankOps.filter(
+          (v: DataOption) => v.name.toLowerCase().indexOf(newVal) > -1
+        );
+      });
+      break;
+
     default:
       break;
   }
@@ -470,6 +492,7 @@ function saveData() {
         positionNumberOld: posNo.value,
         amount: 0,
         amountOld: salary.value,
+        rank: informaData.value.rank,
       };
       showLoader();
       http
@@ -517,6 +540,15 @@ function updateBirthDate(v: Date) {
   informaData.value.age = calculateAge(v);
 }
 
+function prefixRankRule() {
+  return [
+    () =>
+      !!informaData.value.rank ||
+      !!informaData.value.prefixId ||
+      "กรุณาเลือกคำนำหน้าชื่อ หรือยศ",
+  ];
+}
+
 /** ทำงานเมื่อมีการเรียกใช้ Components*/
 onMounted(async () => {
   await fetchPerson();
@@ -598,7 +630,7 @@ onMounted(async () => {
               <div class="col-xs-12">
                 <div class="text-weight-bold text-grey">ข้อมูลส่วนตัว</div>
               </div>
-              <div class="col-xs-6 col-sm-3 col-md-3">
+              <div class="col-xs-6 col-sm-2 col-md-2">
                 <q-input
                   :class="getClass(edit)"
                   hide-bottom-space
@@ -614,7 +646,7 @@ onMounted(async () => {
                   mask="#############"
                 />
               </div>
-              <div class="col-xs-6 col-sm-3 col-md-3">
+              <div class="col-xs-6 col-sm-2 col-md-2">
                 <selector
                   :hide-dropdown-icon="!edit"
                   hide-bottom-space
@@ -634,10 +666,42 @@ onMounted(async () => {
                   option-value="name"
                   :label="`${'คำนำหน้าชื่อ'}`"
                   use-input
+                  clearable
                   input-debounce="0"
+                  :rules="prefixRankRule()"
+                  reactive-rules
                   @filter="(inputValue:string, doneFn:Function) => filterSelector(inputValue, doneFn,'prefixOps' ) "
                 />
               </div>
+
+              <div class="col-xs-6 col-sm-2 col-md-2">
+                <selector
+                  :hide-dropdown-icon="!edit"
+                  hide-bottom-space
+                  :class="getClass(edit)"
+                  :readonly="!edit"
+                  :borderless="!edit"
+                  :outlined="edit"
+                  dense
+                  lazy-rules
+                  v-model="informaData.rank"
+                  emit-value
+                  map-options
+                  hide-selected
+                  fill-input
+                  :rules="prefixRankRule()"
+                  option-label="name"
+                  :options="Ops.rankOps"
+                  option-value="name"
+                  :label="`${'ยศ'}`"
+                  reactive-rules
+                  use-input
+                  input-debounce="0"
+                  @filter="(inputValue:string, doneFn:Function) => filterSelector(inputValue, doneFn,'rankOps' ) "
+                  clearable
+                />
+              </div>
+
               <div class="col-xs-6 col-sm-3 col-md-3">
                 <q-input
                   :class="getClass(edit)"

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

@@ -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(orientation.value) +
-      Number(self_learning.value) +
+    Number(self_learning.value) +
-      Number(training_seminar.value) +
+    Number(training_seminar.value) +
-      Number(other_training.value)) /
+    (isSelectionPartfour.value ? Number(other_training.value) : 0)
-    4
   );
 });
 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(orientation.value) +
-      Number(self_learning.value) +
+    Number(self_learning.value) +
-      Number(training_seminar.value) +
+    Number(training_seminar.value) +
-      Number(other_training.value)) /
+    (isSelectionPartfour.value ? Number(other_training.value) : 0)
-    4
   );
 });
 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/05_placement/interface/index/ProfileType.ts

@@ -7,6 +7,7 @@ interface InformationOps {
   religionOps: DataOption[];
   employeeClassOps: DataOption[];
   employeeTypeOps: DataOption[];
+  rankOps: DataOption[];
 }
 
 //ข้อมูลส่วนตัว
@@ -63,6 +64,7 @@ interface FormAddPerson {
   employeeType: string | null;
   employeeClass: string | null;
   profileType: string | null;
+  rank?: string;
 }
 
 const defaultInformation: Information = {
@@ -83,6 +85,7 @@ const defaultInformation: Information = {
   employeeType: null,
   employeeClass: null,
   profileType: null,
+  rank: null,
 };
 
 export { defaultInformation };

src/modules/05_placement/interface/request/Main.ts

@@ -152,6 +152,7 @@ interface FormDataAppoint {
   reportingDate: string;
   posmasterId: string;
   posExecutiveName?: string;
+  posExecutiveId?: string;
   typeCommand: string;
   positionExecutiveField?: string;
   positionArea?: string;

src/modules/05_placement/store.ts

@@ -10,25 +10,25 @@ import type {
 } from "@/modules/05_placement/interface/request/Main";
 import type { FormOrderPlacementMainData } from "@/modules/05_placement/interface/request/Main";
 
-export const useProfileDataStore = defineStore("profilePlacenent", () => {
+interface profile {
-  interface profile {
+  main: { columns: String[] };
-    main: { columns: String[] };
+  education: { columns: String[] };
-    education: { columns: String[] };
+  certicate: { columns: String[] };
-    certicate: { columns: String[] };
+  train: { columns: String[] };
-    train: { columns: String[] };
+  insignia: { columns: String[] };
-    insignia: { columns: String[] };
+  coined: { columns: String[] };
-    coined: { columns: String[] };
+  assessment: { columns: String[] };
-    assessment: { columns: String[] };
+  salary: { columns: String[] };
-    salary: { columns: String[] };
+  discipline: { columns: String[] };
-    discipline: { columns: String[] };
+  leave: { columns: String[] };
-    leave: { columns: String[] };
+  talent: { columns: String[] };
-    talent: { columns: String[] };
+  work: { columns: String[] };
-    work: { columns: String[] };
+  record: { columns: String[] };
-    record: { columns: String[] };
+  other: { columns: String[] };
-    other: { columns: String[] };
+  document: { columns: String[] };
-    document: { columns: String[] };
+}
-  }
 
+export const useProfileDataStore = defineStore("profilePlacenent", () => {
   const birthDate = ref<Date>(new Date());
   const retireText = ref<string | null>(null);
   const changeRetireText = (val: string | null) => {
@@ -87,15 +87,15 @@ export const useProfileDataStore = defineStore("profilePlacenent", () => {
     changeRetireText,
   };
 });
+interface placement {
+  mappingPosition: { columns: String[] };
+}
 export const usePlacementDataStore = defineStore("placement", () => {
   const mixin = useCounterMixin(); //เรียกฟังก์ชันกลาง
   const tabsMain = ref<string>("probation");
   const isOfficer = ref<boolean | null>(null);
   const isStaff = ref<boolean | null>(null);
   const { hideLoader } = mixin;
-  interface placement {
-    mappingPosition: { columns: String[] };
-  }
   const placementData = ref<placement>({
     mappingPosition: { columns: [] },
   });
@@ -218,10 +218,10 @@ export const usePlacementDataStore = defineStore("placement", () => {
     isStaff,
   };
 });
+interface placementOrder {
+  mappingPosition: { columns: String[] };
+}
 export const useOrderPlacementDataStore = defineStore("placementOrder", () => {
-  interface placementOrder {
-    mappingPosition: { columns: String[] };
-  }
   const placementOrderData = ref<placementOrder>({
     mappingPosition: { columns: [] },
   });
@@ -369,6 +369,8 @@ export const useTransferDataStore = defineStore("transferDataStore", () => {
   ]);
   const statusOp = ref<DataOptions[]>(statusMainOp.value);
 
+  const statusDelete = ["REPORT", "WAITING", "DONE"];
+
   const statusText = (val: string) => {
     switch (val) {
       case "WAITTING":
@@ -438,5 +440,6 @@ export const useTransferDataStore = defineStore("transferDataStore", () => {
     statusOp,
     statusMainOp,
     filterOption,
+    statusDelete,
   };
 });

src/modules/05_placement/stores/storeSelect.ts

@@ -1,5 +1,5 @@
 import { defineStore } from "pinia";
-import { ref } from "vue";
+import { formatPosmasterNo } from "@/utils/function";
 /** importType*/
 import type { PositionMaim } from "@/modules/05_placement/interface/response/SelectOrg";
 import type { DataPositionNo } from "@/modules/05_placement/interface/index/SelectOrg";
@@ -12,11 +12,13 @@ export const useSelectOrgStore = defineStore("selectorg", () => {
     const listPosNo: DataPositionNo[] = data.map((e: PositionMaim) => ({
       id: e.id,
       isPosition: e.isPosition,
-      posMasterNo:
+      posMasterNo: formatPosmasterNo(
-        e.orgShortname +
+        e.orgShortname,
-        (e.posMasterNoPrefix != null ? e.posMasterNoPrefix : " ") +
+        e.posMasterNoPrefix,
-        e.posMasterNo +
+        e.posMasterNo.toString(),
-        (e.posMasterNoSuffix != null ? e.posMasterNoSuffix : " "),
+        e.posMasterNoSuffix
+      ),
+
       positionName: e.positionName,
       posTypeName: e.posTypeName,
       posLevelName: e.posLevelName,

src/modules/05_placement/views/02_transferMain.vue

@@ -2,7 +2,7 @@
 import { ref, onMounted, computed } from "vue";
 import { useQuasar } from "quasar";
 
-import { useRouter } from "vue-router";
+import { useRouter, useRoute } from "vue-router";
 import {
   checkPermission,
   checkPermissionList,
@@ -20,11 +20,19 @@ import DialogOrders from "@/modules/05_placement/components/Transfer/DialogOrder
 
 const $q = useQuasar();
 const router = useRouter();
+const route = useRoute();
 const mixin = useCounterMixin();
 const store = useTransferDataStore();
 const { statusText, filterOption } = useTransferDataStore();
-const { date2Thai, messageError, showLoader, hideLoader, onSearchDataTable } =
+const {
-  mixin;
+  date2Thai,
+  messageError,
+  showLoader,
+  hideLoader,
+  onSearchDataTable,
+  dialogRemove,
+  success,
+} = mixin;
 
 const modal = ref<boolean>(false); //ส่งไปออกคำสั่ง
 const dataTransfer = ref<ResponseData[]>([]); //ช่อมูลรายการขอโอน
@@ -141,6 +149,15 @@ const visibleColumns = ref<string[]>([
   "createdAt",
 ]);
 
+const isPermissionDelete = computed(() => {
+  return (status: string) => {
+    return (
+      checkPermission(route)?.attrOwnership === "OWNER" &&
+      !store.statusDelete.includes(status)
+    );
+  };
+});
+
 /** ฟังก์ชันดึงข้อมูรายการขอโอน*/
 async function fetchData() {
   showLoader();
@@ -194,6 +211,21 @@ function onSearch() {
   );
 }
 
+function handleDelete(id: string) {
+  dialogRemove($q, async () => {
+    try {
+      showLoader();
+      await http.delete(config.API.transfer + `/admin/${id}`);
+      await fetchData();
+      success($q, "ลบข้อมูลสำเร็จ");
+    } catch (error) {
+      messageError($q, error);
+    } finally {
+      hideLoader();
+    }
+  });
+}
+
 /**
  * ทำงานเมื่อ Components ถูกเรียกใช้งาน
  * จะเรียกใช้ fetchData เพื่อดึงข้อมูลรายการขอโอน
@@ -337,6 +369,18 @@ onMounted(async () => {
                 >
                   <q-tooltip>รายละเอียด</q-tooltip>
                 </q-btn>
+
+                <q-btn
+                  v-if="isPermissionDelete(props.row.status)"
+                  flat
+                  round
+                  dense
+                  icon="mdi-delete"
+                  color="red"
+                  @click.prevent="handleDelete(props.row.id)"
+                >
+                  <q-tooltip>ลบข้อมูล</q-tooltip>
+                </q-btn>
               </q-td>
               <q-td v-for="col in props.cols" :key="col.id">
                 <div v-if="col.name === 'no'">

src/modules/05_placement/views/03_receiveMain.vue

@@ -110,7 +110,9 @@ const columns = ref<QTableProps["columns"]>([
     sort: (a: string, b: string) =>
       a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
     format(val, row) {
-      return `${row.prefix ?? ""}${row.firstName ?? ""} ${row.lastName ?? ""}`;
+      return ` ${row.rank ? row.rank : row.prefix ?? ""}${
+        row.firstName ?? ""
+      } ${row.lastName ?? ""}`;
     },
   },
   {
@@ -131,9 +133,11 @@ const columns = ref<QTableProps["columns"]>([
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
     format(val, row) {
-      return row.positionTypeOld
+      return row.positionTypeOld && row.positionTypeOld !== "-"
         ? `${row.positionTypeOld}${
-            row.positionLevelOld ? `(${row.positionLevelOld})` : ""
+            row.positionLevelOld && row.positionLevelOld !== "-"
+              ? `(${row.positionLevelOld})`
+              : ""
           }`
         : "";
     },
@@ -309,7 +313,7 @@ function openDelete(id: string) {
   dialogRemove($q, async () => {
     showLoader();
     await http
-      .delete(config.API.receiveDataId(id))
+      .delete(config.API.receiveData() + `/admin/${id}`)
       .then(async () => {
         await fecthlistRecevice();
         await success($q, "ลบข้อมูลสำเร็จ");
@@ -378,6 +382,7 @@ async function onSave(data: FormDataAppoint) {
     typeCommand: data.typeCommand,
     positionExecutiveField: data.positionExecutiveField,
     positionArea: data.positionArea,
+    posExecutiveId: data.posExecutiveId,
   };
 
   showLoader();
@@ -601,8 +606,10 @@ onMounted(async () => {
 
                         <q-item
                           v-if="
-                            checkPermission($route)?.attrIsDelete &&
+                            checkPermission($route)?.attrOwnership ===
+                              'OWNER' &&
                             props.row.status !== 'REPORT' &&
+                            props.row.status !== 'WAITING' &&
                             props.row.status !== 'DONE'
                           "
                           clickable

src/modules/05_placement/views/04_helpGovernmentMain.vue

@@ -77,7 +77,7 @@ const columns = ref<QTableProps["columns"]>([
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
     format(val, row) {
-      return findPosMasterNoOld(row);
+      return row.positionNumberOld ?? "-";
     },
   },
   {
@@ -236,8 +236,7 @@ function openModalOrder() {
         item.status == "APPROVE") &&
       item.organizationPositionOld &&
       item.organization &&
-      item.dateStart &&
+      item.dateStart
-      item.dateEnd
   );
   rows2.value = row;
   rows2Data.value = row;

src/modules/05_placement/views/06_appointPromoteMain.vue

@@ -457,6 +457,7 @@ async function onSave(data: FormDataAppoint) {
     typeCommand: data.typeCommand,
     positionExecutiveField: data.positionExecutiveField,
     positionArea: data.positionArea,
+    posExecutiveId: data.posExecutiveId,
   };
 
   showLoader();

src/modules/05_placement/views/08_otherMain.vue

@@ -286,6 +286,7 @@ async function onSaveSelectOrg(data: any) {
     typeCommand: data.typeCommand,
     positionExecutiveField: data.positionExecutiveField,
     positionArea: data.positionArea,
+    posExecutiveId: data.posExecutiveId,
   };
 
   showLoader();

src/modules/06_retirement/components/02_resign/DialogSendToCommand.vue

@@ -5,10 +5,12 @@ import { useQuasar } from "quasar";
 import { useCounterMixin } from "@/stores/mixin";
 import { useRetirementDataStore } from "@/modules/06_retirement/store/Main";
 import { useRoleWorkflowDataStore } from "@/stores/roleWorkflow";
+import { useCommandMainStore } from "@/modules/18_command/store/Main";
 
 import type { PropType } from "vue";
 import type { QTableProps } from "quasar";
 import type { ResponseItems } from "@/modules/06_retirement/interface/response/Main";
+import type { ListCommand } from "@/modules/18_command/interface/index/Main";
 
 import DialogHeader from "@/components/DialogHeader.vue";
 import DialogCreateCommand from "@/modules/18_command/components/DialogCreateCommand.vue";
@@ -16,6 +18,7 @@ import DialogCreateCommand from "@/modules/18_command/components/DialogCreateCom
 /** use */
 const $q = useQuasar();
 const stroe = useRetirementDataStore();
+const storeCommand = useCommandMainStore();
 const { fetchDataCheckIsoffice } = useRoleWorkflowDataStore();
 const { statusText } = stroe;
 const selected = ref<ResponseItems[]>([]);
@@ -47,6 +50,10 @@ const props = defineProps({
   cancel: { type: Boolean, default: false },
 });
 
+const commandType = ref<string>("");
+const commandMainOp = ref<ListCommand[]>([]); //ข้อมูลรายการคำสั่ง
+const commandOp = ref<ListCommand[]>([]); //ตัวเลือกคำสั่ง
+
 //Table
 const filterKeyword = defineModel<string>("filterKeyword", { required: true });
 const rowsData = ref<ResponseItems[]>([]);
@@ -169,6 +176,11 @@ const visibleColumns = ref<string[]>([
 ]);
 
 const modalCommand = ref<boolean>(false);
+const isDisable = computed(() => {
+  return props.mainTabs === "1"
+    ? selected.value.length === 0 || commandType.value === ""
+    : selected.value.length === 0;
+});
 
 /** popup ยืนยันส่งัว */
 function saveOrder() {
@@ -210,6 +222,19 @@ async function fetchCheckOfficer() {
   }
 }
 
+/**
+ * ฟิลเตอร์ คำสั่ง
+ * @param val ค่าจาก Input
+ * @param update Funtion quasar
+ */
+function filterSelector(val: string, update: Function) {
+  update(() => {
+    commandOp.value = commandMainOp.value.filter(
+      (v: ListCommand) => v.name.indexOf(val) > -1
+    );
+  });
+}
+
 watch(
   () => props.modal,
   async (val) => {
@@ -231,6 +256,11 @@ watch(
 
       rowsData.value = data ? data : [];
       rowsDataMain.value = data ? data : [];
+      commandType.value = "";
+      const dataCommandTypes = await storeCommand.getCommandTypes();
+      commandMainOp.value = dataCommandTypes.filter(
+        (e: ListCommand) => e.code === "C-PM-17" || e.code === "C-PM-48"
+      );
     } else {
       rowsData.value = [];
       rowsDataMain.value = [];
@@ -238,6 +268,7 @@ watch(
   }
 );
 </script>
+
 <template>
   <q-dialog v-model="props.modal" persistent>
     <q-card style="min-width: 85%">
@@ -249,6 +280,33 @@ watch(
       <q-card-section>
         <div class="row col-12 q-col-gutter-sm">
           <div class="col-12 row">
+            <q-select
+              v-if="props.mainTabs === '1'"
+              v-model="commandType"
+              dense
+              outlined
+              label="ประเภทคำสั่ง"
+              :options="commandOp"
+              option-label="name"
+              option-value="code"
+              emit-value
+              map-options
+              use-input
+              hide-selected
+              fill-input
+              @update:model-value="onSearch"
+              @filter="(inputValue:string,
+                    doneFn:Function) => filterSelector(inputValue, doneFn
+                    ) "
+            >
+              <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
               borderless
@@ -332,7 +390,7 @@ watch(
         <q-btn
           label="ส่งไปออกคำสั่ง"
           @click="saveOrder"
-          :disable="selected.length === 0"
+          :disable="isDisable"
           color="public"
         />
       </q-card-actions>
@@ -341,7 +399,7 @@ watch(
 
   <DialogCreateCommand
     v-model:modal="modalCommand"
-    :command-type-code="props.mainTabs === '1' ? 'C-PM-17' : 'C-PM-41'"
+    :command-type-code="props.mainTabs === '1' ? commandType : 'C-PM-41'"
     :persons="dataMapToSend"
     :fetch-data="props.fecthList"
   />

src/modules/06_retirement/components/02_resign/ResignByid.vue

@@ -47,6 +47,7 @@ const {
   success,
   dialogConfirm,
   dialogRemove,
+  convertDateToAPI,
 } = mixin;
 
 /** ตัวแปร */
@@ -477,9 +478,8 @@ function onSubmitConditions() {
 function onSubmitAttached() {
   dialogConfirm($q, async () => {
     const formData = new FormData();
-    const send = date.value !== null ? new Date(date.value).toUTCString() : "";
+    const send: string = convertDateToAPI(date.value) ?? "";
-    const activeDate =
+    const activeDate: string = convertDateToAPI(dateLeave.value) ?? "";
-      dateLeave.value !== null ? new Date(dateLeave.value).toUTCString() : "";
     formData.append("Location", location.value);
     formData.append("SendDate", send);
     formData.append("ActiveDate", activeDate);
@@ -771,10 +771,13 @@ onMounted(async () => {
         <q-space />
         <div
           v-if="
-          !checkRoutePermisson &&
+            (!checkRoutePermisson &&
-            isStaff &&
+              isStaff &&
-            status === 'WAITTING' &&
+              status === 'WAITTING' &&
-            checkPermission($route)?.attrIsUpdate
+              checkPermission($route)?.attrIsUpdate) ||
+            (!checkRoutePermisson &&
+              ((isStaff && group === '1.1' && approveStep === 'st1') ||
+                (isOfficer && group !== '1.1' && approveStep === 'st3')))
           "
         >
           <q-btn

src/modules/06_retirement/components/02_resign/ResignReject.vue

@@ -34,6 +34,7 @@ const {
   hideLoader,
   success,
   dialogConfirm,
+  convertDateToAPI,
 } = useCounterMixin();
 
 const checkRoutePermisson = ref<boolean>(route.name == "resignDetailreject");
@@ -313,9 +314,8 @@ async function clickCancel() {
 function onSubmitAttached() {
   dialogConfirm($q, () => {
     const formData = new FormData();
-    const send = date.value !== null ? new Date(date.value).toUTCString() : "";
+    const send: string = convertDateToAPI(date.value) ?? "";
-    const activeDate =
+    const activeDate: string = convertDateToAPI(dateLeave.value) ?? "";
-      dateLeave.value !== null ? new Date(dateLeave.value).toUTCString() : "";
     formData.append("Location", location.value);
     formData.append("SendDate", send);
     formData.append("ActiveDate", activeDate);

src/modules/06_retirement/components/02_resign/Table.vue

@@ -33,7 +33,8 @@ const {
   showLoader,
   hideLoader,
   onSearchDataTable,
-  findOrgName,
+  dialogRemove,
+  success,
 } = mixin;
 
 /** Table */
@@ -257,6 +258,21 @@ function onSearch() {
   );
 }
 
+function handleDelete(id: string) {
+  dialogRemove($q, async () => {
+    try {
+      showLoader();
+      await http.delete(config.API.listResign() + `/admin/${id}`);
+      await fecthlist();
+      success($q, "ลบข้อมูลสำเร็จ");
+    } catch (error) {
+      messageError($q, error);
+    } finally {
+      hideLoader();
+    }
+  });
+}
+
 /**Hook */
 onMounted(async () => {
   status.value = stroeResign.formQurey.status;
@@ -308,7 +324,11 @@ onMounted(async () => {
             color="primary"
             icon="mdi-account-arrow-right"
           >
-            <q-tooltip>{{ `ส่งไปออกคำสั่ง${stroeResign.mainTabs == '2'?"ยกเลิกการ":''}ลาออก` }}</q-tooltip>
+            <q-tooltip>{{
+              `ส่งไปออกคำสั่ง${
+                stroeResign.mainTabs == "2" ? "ยกเลิกการ" : ""
+              }ลาออก`
+            }}</q-tooltip>
           </q-btn>
         </div>
         <q-space />
@@ -393,6 +413,26 @@ onMounted(async () => {
                 >
                   <q-tooltip>แก้ไขข้อมูล</q-tooltip>
                 </q-btn>
+
+                <q-btn
+                  v-if="
+                    checkPermission($route)?.attrOwnership === 'OWNER' &&
+                    props.row.status !== 'REPORT' &&
+                    props.row.status !== 'WAITING' &&
+                    props.row.status !== 'DONE' &&
+                    props.row.status !== 'CANCELING' &&
+                    props.row.status !== 'CANCEL' &&
+                    stroeResign.mainTabs === '1'
+                  "
+                  flat
+                  dense
+                  round
+                  color="red"
+                  icon="delete"
+                  @click.prevent="handleDelete(props.row.id)"
+                >
+                  <q-tooltip>ลบข้อมูล</q-tooltip>
+                </q-btn>
               </q-td>
               <q-td v-for="col in props.cols" :key="col.id">
                 <div

src/modules/06_retirement/components/03_resignEmp/ResignByid.vue

@@ -801,10 +801,11 @@ onMounted(async () => {
         <q-space />
         <div
           v-if="
-          !checkRoutePermisson &&
+            (!checkRoutePermisson &&
-            isStaff &&
+              isStaff &&
-            status === 'WAITTING' &&
+              status === 'WAITTING' &&
-            checkPermission($route)?.attrIsUpdate
+              checkPermission($route)?.attrIsUpdate) ||
+            (!checkRoutePermisson && isStaff && approveStep === 'st1')
           "
         >
           <q-btn

src/modules/06_retirement/components/03_resignEmp/ResignReject.vue

@@ -38,6 +38,7 @@ const {
   hideLoader,
   success,
   dialogConfirm,
+  convertDateToAPI,
 } = mixin;
 
 /** ตัวแปร */
@@ -301,9 +302,9 @@ async function clickCancel() {
 function onSubmitAttached() {
   dialogConfirm($q, () => {
     const formData = new FormData();
-    const send = date.value !== null ? new Date(date.value).toUTCString() : "";
+    const send: string = convertDateToAPI(date.value) ?? "";
-    const activeDate =
+    const activeDate: string = convertDateToAPI(dateLeave.value) ?? "";
-      dateLeave.value !== null ? new Date(dateLeave.value).toUTCString() : "";
+
     formData.append("Location", location.value);
     formData.append("SendDate", send);
     formData.append("ActiveDate", activeDate);

src/modules/06_retirement/components/03_resignEmp/Table.vue

@@ -27,8 +27,15 @@ const stroeResign = useDataStore();
 const { statusText } = stroe;
 const router = useRouter();
 const mixin = useCounterMixin();
-const { messageError, date2Thai, showLoader, hideLoader, onSearchDataTable } =
+const {
-  mixin;
+  messageError,
+  date2Thai,
+  showLoader,
+  hideLoader,
+  onSearchDataTable,
+  dialogRemove,
+  success,
+} = mixin;
 
 /** Table */
 const rows = ref<ResponseItems[]>([]);
@@ -129,7 +136,7 @@ const columns = ref<QTableProps["columns"]>([
     sortable: true,
     field: "status",
     format(val, row) {
-      return stroeResign.mainTabs === "1"
+      return stroeResign.mainTabsEMP === "1"
         ? statusText(row.status)
         : statusText(row.status, "อนุญาต");
     },
@@ -252,6 +259,21 @@ function onSearch() {
   );
 }
 
+function handleDelete(id: string) {
+  dialogRemove($q, async () => {
+    try {
+      showLoader();
+      await http.delete(config.API.listResignEMP() + `/admin/${id}`);
+      await fecthlist();
+      success($q, "ลบข้อมูลสำเร็จ");
+    } catch (error) {
+      messageError($q, error);
+    } finally {
+      hideLoader();
+    }
+  });
+}
+
 /**Hook */
 onMounted(async () => {
   statusEMP.value = stroeResign.formQureyEMP.status;
@@ -391,6 +413,26 @@ onMounted(async () => {
                 >
                   <q-tooltip>แก้ไขข้อมูล</q-tooltip>
                 </q-btn>
+
+                <q-btn
+                  v-if="
+                    checkPermission($route)?.attrOwnership === 'OWNER' &&
+                    props.row.status !== 'REPORT' &&
+                    props.row.status !== 'WAITING' &&
+                    props.row.status !== 'DONE' &&
+                    props.row.status !== 'CANCELING' &&
+                    props.row.status !== 'CANCEL' &&
+                    stroeResign.mainTabsEMP === '1'
+                  "
+                  flat
+                  dense
+                  round
+                  color="red"
+                  icon="delete"
+                  @click.prevent="handleDelete(props.row.id)"
+                >
+                  <q-tooltip>ลบข้อมูล</q-tooltip>
+                </q-btn>
               </q-td>
               <q-td v-for="col in props.cols" :key="col.id">
                 <div

src/modules/06_retirement/components/DialogAddCommander.vue

@@ -4,7 +4,6 @@ import { useQuasar, type QTableProps } from "quasar";
 
 import http from "@/plugins/http";
 import config from "@/app.config";
-import { getColumnLabel } from "@/utils/function";
 import { useCounterMixin } from "@/stores/mixin";
 
 import DialogHeader from "@/components/DialogHeader.vue";
@@ -309,9 +308,7 @@ watch(
                       :key="col.name"
                       :props="props"
                     >
-                      <span class="text-weight-medium">{{
+                      <span class="text-weight-medium">{{ col.label }}</span>
-                        getColumnLabel(col, isAct)
-                      }}</span>
                     </q-th>
                   </q-tr>
                 </template>

src/modules/08_registryEmployee/components/DialogSelectPos.vue

@@ -5,6 +5,7 @@ import { useQuasar } from "quasar";
 import { useRoute } from "vue-router";
 import { useCounterMixin } from "@/stores/mixin";
 import { useStructureTree } from "@/stores/structureTree";
+import { formatPosmasterNo } from "@/utils/function";
 import http from "@/plugins/http";
 import config from "@/app.config";
 
@@ -74,7 +75,12 @@ const columns = ref<QTableProps["columns"]>([
     sortable: true,
     field: "posMasterNo",
     format(val, row) {
-      return `${row.orgShortname} ${row.posMasterNo}`;
+      return formatPosmasterNo(
+        row.orgShortname,
+        row.posMasterNoPrefix,
+        row.posMasterNo.toString(),
+        row.posMasterNoSuffix
+      );
     },
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",

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

@@ -97,7 +97,7 @@ watch(
       formData.note = "";
     } else if (props.editCheck === "PENDING") {
       if (props.detailData) { 
-        if (props.detailData.checkInEdit) {
+       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/Calendar.vue

@@ -228,8 +228,12 @@ onMounted(async () => {
 <template>
   <div class="q-mt-sm">
     <div class="row q-gutter-sm">
-      <div class="col-3">
+      <div class="col-3 scrollable-list">
-        <q-list bordered class="rounded-borders">
+        <q-list
+          bordered
+          class="rounded-borders"
+          style="max-height: 80vh; overflow-y: auto"
+        >
           <q-item
             v-for="(item, i) in filterLists"
             :key="i"

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
@@ -692,10 +700,10 @@ onMounted(async () => {
         fetchOptionType(),
         fetchKeycloakPositionData(),
         fetchDetailLeave(paramsId),
-        checkOfficer(),
       ]);
 
       await checkLeaveType(formData.leaveTypeId, formData);
+      await checkOfficer();
     } finally {
       hideLoader();
     }
@@ -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

@@ -4,7 +4,6 @@ import { useQuasar, type QTableProps } from "quasar";
 
 import http from "@/plugins/http";
 import config from "@/app.config";
-import { getColumnLabel } from "@/utils/function";
 import { useCounterMixin } from "@/stores/mixin";
 
 import DialogHeader from "@/components/DialogHeader.vue";
@@ -36,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);
@@ -106,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"
@@ -197,6 +198,7 @@ function closeDialog() {
   modal.value = false;
   rows.value = [];
   selected.value = [];
+  isAllDirector.value = false;
 }
 
 watch(
@@ -232,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"
@@ -252,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"
@@ -319,9 +338,7 @@ watch(
                       :key="col.name"
                       :props="props"
                     >
-                      <span class="text-weight-medium">{{
+                      <span class="text-weight-medium">{{ col.label }}</span>
-                        getColumnLabel(col, isAct)
-                      }}</span>
                     </q-th>
                   </q-tr>
                 </template>

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

@@ -1,17 +1,59 @@
 <script setup lang="ts">
-import { ref, onMounted, watch } from "vue";
+import { ref, onMounted, computed } from "vue";
+import { useQuasar } from "quasar";
 import type { QTableProps } from "quasar";
-import { useRouter } from "vue-router";
+import { useRouter, useRoute } from "vue-router";
 
 import { checkPermission } from "@/utils/permissions";
 import { useLeavelistDataStore } from "@/modules/09_leave/stores/LeaveStore";
+import { useCounterMixin } from "@/stores/mixin";
+import http from "@/plugins/http";
+import config from "@/app.config";
 
+const $q = useQuasar();
 const leaveStore = useLeavelistDataStore();
+const route = useRoute();
 const router = useRouter();
+const { showLoader, hideLoader, messageError, dialogRemove, success } =
+  useCounterMixin();
 
 const total = defineModel<number>("total", { required: true });
 const totalList = defineModel<number>("totalList", { required: true });
 const pagination = defineModel<any>("pagination", { required: true });
+const props = defineProps({
+  getList: Function,
+  rows: {
+    type: Object,
+    require: true,
+  },
+  page: {
+    type: Number,
+    require: true,
+  },
+  rowsPerPage: {
+    type: Number,
+    require: true,
+  },
+  maxPage: {
+    type: Number,
+    require: true,
+  },
+  totalList: {
+    type: Number,
+    require: true,
+  },
+  dataToobar: Object,
+});
+
+const isPermissionDelete = computed(() => {
+  return (status: string) => {
+    return (
+      checkPermission(route)?.attrOwnership === "OWNER" &&
+      !leaveStore.statusDelete.includes(status) &&
+      leaveStore.tabMenu === "1"
+    );
+  };
+});
 
 /** ข้อมูลหัวตาราง รายการลา */
 const columnsLeave = ref<QTableProps["columns"]>([
@@ -212,31 +254,6 @@ const visibleReject = ref<string[]>([
   "status",
 ]);
 
-const props = defineProps({
-  getList: Function,
-  rows: {
-    type: Object,
-    require: true,
-  },
-  page: {
-    type: Number,
-    require: true,
-  },
-  rowsPerPage: {
-    type: Number,
-    require: true,
-  },
-  maxPage: {
-    type: Number,
-    require: true,
-  },
-  totalList: {
-    type: Number,
-    require: true,
-  },
-  dataToobar: Object,
-});
-
 /** ไปหน้ารายละเอียด */
 function redirectToDetail(id: string) {
   const routePrefix = leaveStore.tabMenu === "1" ? "/leave" : "/leave-reject";
@@ -248,6 +265,37 @@ function updatePagination(newPagination: any) {
   pagination.value.rowsPerPage = newPagination.rowsPerPage;
 }
 
+/**
+ * ฟังก์ชันสำหรับดึงชื่อ CSS Class ตามสถานะ
+ * @param statusText สถานะของรายการ
+ */
+function getStatusColor(statusText: string) {
+  const statusMap: Record<string, string> = {
+    APPROVE: "text-green-6",
+    REJECT: "text-red",
+    NEW: "text-blue",
+    PENDING: "text-warning",
+    // DELETE  DELETING
+  };
+
+  return statusMap[statusText.toUpperCase()] ?? "";
+}
+
+function handleDelete(id: string) {
+  dialogRemove($q, async () => {
+    try {
+      showLoader();
+      await http.delete(config.API.leaveList() + `/${id}`);
+      await props.getList?.();
+      success($q, "ลบข้อมูลสำเร็จ");
+    } catch (error) {
+      messageError($q, error);
+    } finally {
+      hideLoader();
+    }
+  });
+}
+
 /** Hook*/
 onMounted(() => {
   if (leaveStore.tabMenu === "1") {
@@ -297,23 +345,23 @@ onMounted(() => {
           >
             <q-tooltip>รายละเอียด</q-tooltip>
           </q-btn>
+          <q-btn
+            v-if="isPermissionDelete(props.row.statusText)"
+            flat
+            round
+            dense
+            icon="mdi-delete"
+            color="red"
+            @click.prevent="handleDelete(props.row.id)"
+          >
+            <q-tooltip>ลบข้อมูล</q-tooltip>
+          </q-btn>
         </q-td>
         <q-td
           v-for="col in props.cols"
           :key="col.name"
           :props="props"
-          :class="
+          :class="getStatusColor(props.row.statusText)"
-            props.row.statusText == 'REJECT'
-              ? 'text-red'
-              : props.row.statusText == 'NEW'
-              ? 'text-blue'
-              : props.row.statusText == 'PENDING'
-              ? 'text-warning'
-              : props.row.statusText == 'DELETE' ||
-                props.row.statusText == 'DELETING'
-              ? 'text-orange'
-              : ''
-          "
         >
           <div v-if="col.name == 'no'">
             {{

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/stores/LeaveStore.ts

@@ -44,6 +44,8 @@ export const useLeavelistDataStore = defineStore("leave", () => {
 
   const leaveType = ref<LeaveType[]>([]);
 
+  const statusDelete = ["APPROVE", "DELETING", "DELETE"];
+
   /**
    * ฟังก์ชั่น fetchListLeave
    * @param data รับข้อมูลจาก Page
@@ -264,5 +266,6 @@ export const useLeavelistDataStore = defineStore("leave", () => {
     leaveTypeOption,
     leaveTypeList,
     fetchKeycloakPosition,
+    statusDelete,
   };
 });

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/12_evaluatePersonal/components/Detail/Tab1.vue

@@ -50,7 +50,7 @@ const id = ref<string>(route.params.id as string); // id รายการป
 const isLoadView = ref<boolean>(false); //แสดง view
 const modalHistory = ref<boolean>(false); //แสดง popup ประวัติการประเมิน
 // ข้อมูลผู้เซ็นเอกสาร
-const formCommand = reactive<FormCommand>({
+const formCommand = reactive({
   elementaryFullName: "", //ชื่อผู้บังคับบัญชาชั้นต้น
   elementaryPosition: "", //ตำแหน่งผู้บังคับบัญชาชั้นต้น
   abovelevelFullname: "", //ชื่อผู้บังคับบัญชาเหนือขึ้นไป 1 ระดับ

src/modules/12_evaluatePersonal/store/Evaluate.ts

@@ -58,6 +58,7 @@ export const useEvalutuonStore = defineStore("EvalutuonStore", () => {
     const dataList: EvaluateList[] = data.map(
       (data: EvaluateRes) =>
         ({
+          ...data,
           id: data.id,
           citizenId: data.citizenId,
           fullName: data.fullName,
@@ -133,7 +134,7 @@ export const useEvalutuonStore = defineStore("EvalutuonStore", () => {
       align: "left",
       label: "เลขที่ตำแหน่ง",
       sortable: true,
-      field: "positionNumber",
+      field: "posNo",
       headerStyle: "font-size: 14px",
       style: "font-size: 14px",
     },

src/modules/12_evaluatePersonal/views/MainPage.vue

@@ -351,7 +351,7 @@ onMounted(async () => {
                 </div>
               </div>
               <div v-else>
-                {{ !col.value ? "-" : col.value }}
+                {{ col.value ? col.value : "-" }}
               </div>
             </q-td>
           </q-tr>

src/modules/13_salary/components/04_salaryLists/DialogAddPerson.vue

@@ -5,6 +5,7 @@ import { useQuasar } from "quasar";
 import { useCounterMixin } from "@/stores/mixin";
 import { useSalaryListSDataStore } from "@/modules/13_salary/store/SalaryListsStore";
 import { usePagination } from "@/composables/usePagination";
+import { formatPosmasterNo } from "@/utils/function";
 import config from "@/app.config";
 import http from "@/plugins/http";
 
@@ -72,9 +73,12 @@ const columns = ref<QTableProps["columns"]>([
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
     format(val, row) {
-      return row.orgShortName && row.posMasterNo
+      return formatPosmasterNo(
-        ? `${row.orgShortName} ${row.posMasterNo}`
+        row.orgShortName,
-        : "-";
+        row.posMasterNoPrefix,
+        row.posMasterNo,
+        row.posMasterNoSuffix
+      );
     },
   },
   {

src/modules/13_salary/components/04_salaryLists/TableTypeOther.vue

@@ -19,6 +19,7 @@ import DialogMoveLevel from "@/modules/13_salary/components/04_salaryLists/Dialo
 /** importStore*/
 import { useCounterMixin } from "@/stores/mixin";
 import { useSalaryListSDataStore } from "@/modules/13_salary/store/SalaryListsStore";
+import { formatPosmasterNo } from "@/utils/function";
 
 /** use*/
 const $q = useQuasar();
@@ -87,9 +88,12 @@ const baseColumns = ref<QTableProps["columns"]>([
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
     format(val, row) {
-      return row.orgShortName && row.posMasterNo
+      return formatPosmasterNo(
-        ? `${row.orgShortName} ${row.posMasterNo}`
+        row.orgShortName,
-        : "-";
+        row.posMasterNoPrefix,
+        row.posMasterNo,
+        row.posMasterNoSuffix
+      );
     },
   },
   {

src/modules/13_salary/components/04_salaryLists/TableTypePending.vue

@@ -19,6 +19,7 @@ import DialogInfo from "@/modules/13_salary/components/DialogInfoMain.vue";
 /** importStore*/
 import { useCounterMixin } from "@/stores/mixin";
 import { useSalaryListSDataStore } from "@/modules/13_salary/store/SalaryListsStore";
+import { formatPosmasterNo } from "@/utils/function";
 import http from "@/plugins/http";
 import config from "@/app.config";
 
@@ -98,9 +99,12 @@ const columns = ref<QTableColumn[]>([
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
     format(val, row) {
-      return row.orgShortName && row.posMasterNo
+      return formatPosmasterNo(
-        ? `${row.orgShortName} ${row.posMasterNo}`
+        row.orgShortName,
-        : "-";
+        row.posMasterNoPrefix,
+        row.posMasterNo,
+        row.posMasterNoSuffix
+      );
     },
   },
   {

src/modules/13_salary/components/05_salaryListsEmployee/DialogAddPerson.vue

@@ -5,6 +5,7 @@ import { useQuasar } from "quasar";
 import { useCounterMixin } from "@/stores/mixin";
 import { useSalaryEmployeeListSDataStore } from "@/modules/13_salary/store/SalaryEmployeeListsStore";
 import { usePagination } from "@/composables/usePagination";
+import { formatPosmasterNo } from "@/utils/function";
 import config from "@/app.config";
 import http from "@/plugins/http";
 
@@ -71,9 +72,12 @@ const columns = ref<QTableProps["columns"]>([
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
     format(val, row) {
-      return row.orgShortName && row.posMasterNo
+      return formatPosmasterNo(
-        ? `${row.orgShortName} ${row.posMasterNo}`
+        row.orgShortName,
-        : "-";
+        row.posMasterNoPrefix,
+        row.posMasterNo,
+        row.posMasterNoSuffix
+      );
     },
   },
   {

src/modules/13_salary/components/05_salaryListsEmployee/TableTypeOther.vue

@@ -5,6 +5,7 @@ import { useQuasar } from "quasar";
 import { checkPermission } from "@/utils/permissions";
 import { useCounterMixin } from "@/stores/mixin";
 import { useSalaryEmployeeListSDataStore } from "@/modules/13_salary/store/SalaryEmployeeListsStore";
+import { formatPosmasterNo } from "@/utils/function";
 import config from "@/app.config";
 import http from "@/plugins/http";
 
@@ -84,6 +85,14 @@ const baseColumns = ref<QTableProps["columns"]>([
     field: "orgShortName",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
+    format(val, row) {
+      return formatPosmasterNo(
+        row.orgShortName,
+        row.posMasterNoPrefix,
+        row.posMasterNo,
+        row.posMasterNoSuffix
+      );
+    },
   },
   {
     name: "position",

src/modules/13_salary/components/05_salaryListsEmployee/TableTypePending.vue

@@ -6,6 +6,7 @@ import { checkPermission } from "@/utils/permissions";
 
 import { useCounterMixin } from "@/stores/mixin";
 import { useSalaryEmployeeListSDataStore } from "@/modules/13_salary/store/SalaryEmployeeListsStore";
+import { formatPosmasterNo } from "@/utils/function";
 import http from "@/plugins/http";
 import config from "@/app.config";
 
@@ -98,9 +99,12 @@ const columns = ref<QTableColumn[]>([
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
     format(val, row) {
-      return row.orgShortName && row.posMasterNo
+      return formatPosmasterNo(
-        ? `${row.orgShortName} ${row.posMasterNo}`
+        row.orgShortName,
-        : "-";
+        row.posMasterNoPrefix,
+        row.posMasterNo,
+        row.posMasterNoSuffix
+      );
     },
   },
 

src/modules/13_salary/components/DialogInfoMain.vue

@@ -52,7 +52,7 @@ function fetchInformation() {
       citizenId.value = data.citizenId;
 
       if (data.avatarName) {
-        await fetchProfile(data.id as string, data.avatarName);
+        fetchProfile(data.id as string, data.avatarName);
       } else {
         avatar.value = avatarMain;
       }
@@ -70,11 +70,14 @@ function fetchInformation() {
  * @param id profileId
  * @param avatarName ชื้อไฟล์
  */
-async function fetchProfile(id: string, avatarName: string) {
+function fetchProfile(id: string, avatarName: string) {
   http
     .get(config.API.fileByFile("ทะเบียนประวัติ", "โปรไฟล์", id, avatarName))
-    .then(async (res) => {
+    .then((res) => {
       avatar.value = res.data.downloadUrl;
+    })
+    .catch(() => {
+      avatar.value = avatarMain;
     });
 }
 

src/modules/14_KPI/views/detail.vue

@@ -8,6 +8,7 @@ import { useQuasar } from "quasar";
 
 import { useCounterMixin } from "@/stores/mixin";
 import { useKpiDataStore } from "@/modules/14_KPI/store";
+import avatar from "@/assets/avatar_user.jpg";
 
 import DialogHeader from "@/components/DialogHeader.vue";
 import type { FormProfile } from "@/modules/14_KPI/interface/request/index";
@@ -65,7 +66,7 @@ async function fetchEvaluation() {
       await store.checkCompetency();
       await store.checkCompetencyDefaultCompetencyLevel();
 
-      await fetchProfile(data.profileId);
+      fetchProfile(data.profileId);
 
       plannedPoint.value = data.plannedPoint == null ? "" : data.plannedPoint;
       rolePoint.value = data.rolePoint == null ? "" : data.rolePoint;
@@ -81,8 +82,8 @@ async function fetchEvaluation() {
   // });
 }
 
-async function fetchProfile(id: string) {
+function fetchProfile(id: string) {
-  await http
+  http
     .get(
       config.API.fileByFile("ทะเบียนประวัติ", "โปรไฟล์", id, `profile-${id}`)
     )
@@ -90,6 +91,7 @@ async function fetchProfile(id: string) {
       store.dataEvaluation.avartar = res.data.downloadUrl;
     })
     .catch(() => {
+      store.dataEvaluation.avartar = avatar;
       // profilePicture.value = avatar;
     });
 }

src/modules/16_positionEmployee/components/DialogMovePos.vue

@@ -50,7 +50,7 @@ const modal = defineModel<boolean>("modal", { required: true });
 let reqMaster = defineModel<FilterMaster>("reqMaster", { required: true });
 const totalPage = defineModel<number>("totalPage", { required: true });
 const nodeTree = defineModel<OrgTree[]>("nodeTree", { required: true });
-const columns = defineModel<QTableProps[]>("columns", {});
+const columns = defineModel<QTableProps["columns"]>("columns", { required: true });
 const rows = defineModel<PosMaster2[]>("rows", { required: true });
 const props = defineProps({
   fetchDataTree: {

src/modules/16_positionEmployee/components/DialogSuccession.vue

@@ -5,6 +5,7 @@ import { useQuasar } from "quasar";
 import { useRoute } from "vue-router";
 import { useCounterMixin } from "@/stores/mixin";
 import { usePositionEmp } from "@/modules/16_positionEmployee/store/organizational";
+import { formatPosmasterNo } from "@/utils/function";
 import http from "@/plugins/http";
 import config from "@/app.config";
 
@@ -135,11 +136,12 @@ async function fetchTable() {
       const data = res.data.result.data;
       const list = data.map((e: PosMaster) => ({
         ...e,
-        posMasterNo:
+        posMasterNo: formatPosmasterNo(
-          (e.orgShortname !== null ? e.orgShortname : "") +
+          e.orgShortname,
-          (e.posMasterNoPrefix ? e.posMasterNoPrefix : "") +
+          e.posMasterNoPrefix,
-          (e.posMasterNo !== null ? e.posMasterNo : "") +
+          e.posMasterNo.toString(),
-          (e.posMasterNoSuffix !== null ? e.posMasterNoPrefix : ""),
+          e.posMasterNoSuffix ?? ""
+        ),
       }));
       rows.value = list;
     })

src/modules/16_positionEmployee/components/TableMain.vue

@@ -5,7 +5,7 @@ import { useQuasar } from "quasar";
 import { usePositionEmp } from "@/modules/16_positionEmployee/store/organizational";
 import { useCounterMixin } from "@/stores/mixin";
 import { checkPermission } from "@/utils/permissions";
-import { updateCurrentPage } from "@/utils/function";
+import { updateCurrentPage, formatPosmasterNo } from "@/utils/function";
 import genreport from "@/plugins/genreportxlsx";
 import config from "@/app.config";
 import http from "@/plugins/http";
@@ -145,6 +145,13 @@ const columns = ref<QTableProps["columns"]>([
     label: "ตำแหน่งเลขที่",
     sortable: false,
     field: "posMasterNo",
+    format: (val: any, row: any) =>
+      formatPosmasterNo(
+        row.orgShortname,
+        row.posMasterNoPrefix,
+        row.posMasterNoMain,
+        row.posMasterNoSuffix
+      ),
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
   },
@@ -777,7 +784,7 @@ watch(
   <DialogMovePos
     v-model:modal="modalDialogMMove"
     v-model:nodeTree="nodeTree"
-    v-model:columns="columns as QTableProps[]"
+    v-model:columns="columns"
     v-model:rows="posMaster"
     v-model:totalPage="totalPage"
     v-model:reqMaster="reqMaster"