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

.forgejo/workflows/ci-cd.yaml

@@ -32,7 +32,11 @@ jobs:
               ca=["/etc/ssl/certs/ca-certificates.crt"]
       - name: Tag Version
         run: |
-          echo "IMAGE_VERSION=latest"
+          if [ "${{ github.ref_type }}" == "tag" ]; then
+            echo "IMAGE_VERSION=${{ github.ref_name }}" >> $GITHUB_ENV
+          else
+            echo "IMAGE_VERSION=latest" >> $GITHUB_ENV
+          fi
       - name: Login in to registry
         uses: docker/login-action@v2
         with:

package.json

@@ -30,11 +30,13 @@
     "axios": "^1.6.7",
     "bma-org-chart": "^0.0.8",
     "esri-loader": "^3.7.0",
+    "exceljs": "^4.4.0",
     "html-to-image": "^1.11.13",
     "keycloak-js": "^20.0.2",
     "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

@@ -192,6 +192,9 @@ export default {
     `${orgProfile}/keycloak/permissionProfile/${rootId}`,
   profileidPosition: (type: string) =>
     `${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/05_placement/api.placement.ts

@@ -27,6 +27,7 @@ export default {
   placementDefermentInfo: (id: string) => `${placement}/pass/deferment/${id}`,
   placementDisclaimInfo: (id: string) => `${placement}/pass/disclaim/${id}`,
   placementUpdatePass: `${placement}/pass/update-status`,
+  placementUpdateDraftStatus: `${placement}/update/draft-status`,
 
   //personal
   placementPersonalId: (personalId: string) =>

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`,
@@ -61,4 +62,7 @@ export default {
 
   leaveReportAPI: (type: string) =>
     `${leave}/report/download/time-records/${type}`,
+
+  leaveTask: `${leave}/admin/leave-task/process`,
+  leavePendingJobs: `${leave}/pending-jobs/`,
 };

src/api/18_command/api.command.ts

@@ -28,4 +28,6 @@ export default {
 
   commandEditSalary: `${command}/tab2/edit-salary`,
   commandOperator: `${env.API_URI}/org/commandoperator`,
+
+  commandAssign: (id: string) => `${command}/change-creator/${id}`,
 };

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

@@ -96,4 +96,11 @@ export default {
 
   applicationFormPDF: (candidateId: string) =>
     `${env.API_URI}/placement/candidate/pdf/${candidateId}`,
+
+  downloadCandidateExam: (id: string) =>
+    `${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/api/registry/api.registry.ts

@@ -272,4 +272,10 @@ export default {
   profileAssistanceReturn: `${env.API_URI}/placement/repatriation`,
   profileAssistanceUpdateDelete: (type: string) =>
     `${registryNew}${type}/assistance/update-delete/`,
+
+   profileAbsentLate: (type: string) => `${registryNew}${type}/absent-late`,
+   profileAbsentLateUpdateDelete: (type: string) => `${registryNew}${type}/absent-late/update-delete`,
+   profileAbsentLateHistory: (id: string, type: string) =>
+     `${registryNew}${type}/absent-late/history/${id}`,
+
 };

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 ?? ""} ${
-    data.lastName ?? ""
-  } `;
+  profile.fullName = `${data.rank ? data.rank : data.prefix ?? ""}${
+    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/AddPersonal.vue

@@ -305,7 +305,7 @@ watch(
               outlined
               option-label="name"
               option-value="id"
-              @update:model-value="rows = []"
+              @update:model-value="(rows = []), (selected = [])"
             />
           </div>
         </div>
@@ -332,6 +332,7 @@ watch(
               outlined
               dense
               label="คำค้น"
+              @keydown.enter.prevent="searchInput()"
             >
               <template v-slot:after>
                 <q-btn

src/components/Dialogs/DialogDebug.vue

@@ -11,6 +11,7 @@ import http from "@/plugins/http";
 import config from "@/app.config";
 
 import DialogHeader from "@/components/DialogHeader.vue";
+import FooterContact from "@/components/FooterContact.vue";
 
 const $q = useQuasar();
 const store = usePositionKeycloakStore();
@@ -353,6 +354,11 @@ function onClose() {
 
             <div class="col-12">
               <div class="row col-12 q-col-gutter-sm">
+                <div class="col-12">
+                  <div class="text-caption text-grey-8">
+                    ผู้ดูแลระบบจะติดต่อกลับผ่านทางอีเมลที่ท่านระบุ กรุณาตรวจสอบอีเมลของท่านเป็นระยะ
+                  </div>
+                </div>
                 <div class="col-xs-12 col-md-6 col-lg-6">
                   <q-input
                     dense
@@ -362,10 +368,11 @@ function onClose() {
                     class="inputgreen"
                     hide-bottom-space
                     :rules="[
-                      () =>
-                        !!formData.email ||
-                        !!formData.phone ||
-                        'กรุณากรอกอีเมลหรือเบอร์โทรติดต่อกลับ',
+                      (val: string) => !!val || 'กรุณากรอกที่อยู่อีเมล',
+                      (val: string) => {
+                        const emailPattern = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
+                        return emailPattern.test(val) || 'กรุณากรอกที่อยู่อีเมลในรูปแบบที่ถูกต้อง';
+                      }
                     ]"
                   />
                 </div>
@@ -377,12 +384,6 @@ function onClose() {
                     v-model="formData.phone"
                     class="inputgreen"
                     hide-bottom-space
-                    :rules="[
-                      () =>
-                        !!formData.email ||
-                        !!formData.phone ||
-                        'กรุณากรอกอีเมลหรือเบอร์โทรติดต่อกลับ',
-                    ]"
                   />
                 </div>
               </div>
@@ -391,7 +392,11 @@ function onClose() {
         </q-card-section>
 
         <q-separator />
-        <q-card-actions align="right">
+        <q-card-actions class="q-px-sm items-center">
+          <div class="row items-center q-pa-sm">
+            <FooterContact />
+          </div>
+          <q-space />
           <q-btn
             type="submit"
             for="#submitForm"

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 {
@@ -24,14 +25,14 @@ import DialogHeader from "@/components/DialogHeader.vue";
 const props = defineProps({
   dataRows: {
     type: Object,
-    require: true,
+    default: () => ({}),
   },
   onSubmit: Function,
 });
 const $q = useQuasar();
 const route = useRoute();
 const storeTree = useStructureTree();
-const { fetchStructureTree } = useStructureTree();
+const { fetchStructureTree } = storeTree;
 const mixin = useCounterMixin();
 const {
   dialogConfirm,
@@ -47,10 +48,10 @@ const {
 /** props*/
 const modal = defineModel<boolean>("modal", { required: true });
 const title = defineModel<string>("title", { required: true });
-const type = defineModel<any>("type", { required: true });
-const posType = defineModel<any>("posType", { required: true });
-const posLevel = defineModel<any>("posLevel", { required: true });
-const position = defineModel<any>("position", { required: true });
+const type = defineModel<string | null>("type", { required: true });
+const posType = defineModel<string | null>("posType", { required: true });
+const posLevel = defineModel<string | null>("posLevel", { required: true });
+const position = defineModel<string | null>("position", { required: true });
 
 // const routeName = ref<string>(route?.name);
 const orgRevisionId = ref<string>("");
@@ -64,7 +65,7 @@ const itemTaps = ref<string[]>();
 const filters = ref<string>("");
 const positionId = ref<string>("");
 const selectedPos = ref<any[]>([]);
-const seletcId = ref<string>("");
+const selectId = ref<string>("");
 const datePos = ref<Date>(new Date());
 const rowsPosition = ref<Positions[]>([]);
 const positionData = ref<any[]>([]);
@@ -79,7 +80,6 @@ const formActive = reactive<FormActive>({
 });
 /** node */
 const nodes = ref<Array<OrgTree>>([]);
-const lazy = ref(nodes);
 const expanded = ref<string[]>([]);
 const nodeLevel = ref<number>(0);
 const nodeId = ref<string>(""); // id ของ Tree
@@ -150,7 +150,7 @@ const columns = ref<QTableProps["columns"]>([
     style: "font-size: 14px",
   },
 ]);
-const columnsPostition = ref<QTableProps["columns"]>([
+const columnsPosition = ref<QTableProps["columns"]>([
   {
     name: "no",
     align: "left",
@@ -181,7 +181,7 @@ const columnsPostition = ref<QTableProps["columns"]>([
   {
     name: "posTypeName",
     align: "left",
-    label: "ประเภทตำเเหน่ง",
+    label: "ประเภทตำแหน่ง",
     sortable: true,
     field: "posTypeName",
     headerStyle: "font-size: 14px",
@@ -244,10 +244,16 @@ function close() {
   expanded.value = [];
   nodeLevel.value = 0;
   nodeId.value = "";
+  positionData.value = [];
+  positionNo.value = [];
+  rowData.value = [];
 }
 
 async function getDataTable(id: string, level: number = 0) {
   showLoader();
+  positionData.value = [];
+  positionNo.value = [];
+  rowData.value = [];
   const body = {
     node: level,
     nodeId: id,
@@ -257,11 +263,12 @@ 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
     .post(config.API.orgPosPlacement, body)
-    .then((res) => {
+    .then(async (res) => {
       const dataMain: PositionMain[] = [];
       posMasterMain.value = res.data.result.data;
 
@@ -277,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:
-          e.orgShortname +
-          (e.posMasterNoPrefix != null ? e.posMasterNoPrefix : "") +
-          " " +
-          e.posMasterNo +
-          (e.posMasterNoSuffix != null ? e.posMasterNoSuffix : ""),
+        posMasterNo: formatPosmasterNo(
+          e.orgShortname,
+          e.posMasterNoPrefix,
+          e.posMasterNo.toString(),
+          e.posMasterNoSuffix
+        ),
         positionName: e.positionName,
         posTypeName: e.posTypeName,
         posLevelName: e.posLevelName,
@@ -299,7 +306,6 @@ async function getDataTable(id: string, level: number = 0) {
 
       positionNo.value = listPosNo;
       rowData.value = listPosNo;
-      // positionData.value = listPosNo;
 
       if (props.dataRows?.posmasterId) {
         const newUse = positionUse.value.filter(
@@ -313,14 +319,13 @@ async function getDataTable(id: string, level: number = 0) {
           (e: any) => !positionUse.value.includes(e.id)
         );
       }
+      await onClickSelectPos(positionId.value);
     })
     .catch((err) => {
       messageError($q, err);
     })
     .finally(() => {
-      setTimeout(() => {
-        hideLoader();
-      }, 1000);
+      hideLoader();
     });
 }
 
@@ -331,11 +336,11 @@ async function getDataTable(id: string, level: number = 0) {
 function updateSelected(data: DataTree) {
   if (props?.dataRows?.nodeId === data.orgTreeId) {
     positionId.value = props?.dataRows?.posmasterId;
-    seletcId.value = props?.dataRows?.positionId;
+    selectId.value = props?.dataRows?.positionId;
     datePos.value = props?.dataRows?.reportingDate;
   } else {
     positionId.value = "";
-    seletcId.value = "";
+    selectId.value = "";
     selectedPos.value = [];
     datePos.value = new Date();
   }
@@ -382,9 +387,9 @@ async function onClickSelectPos(id: string) {
   // หาตำแหน่ง
   if (position) {
     rowsPosition.value = position.positions;
-    if (seletcId.value) {
+    if (selectId.value) {
       selectedPos.value = rowsPosition.value.filter(
-        (e) => e.id === seletcId.value
+        (e) => e.id === selectId.value
       );
     }
   }
@@ -403,18 +408,19 @@ async function fetchPosFind(level: number, id: string) {
   };
   await http
     .post(config.API.orgPosFind, body)
-    .then((res) => {
+    .then(async (res) => {
       const data = res.data.result;
       expanded.value = data;
       nodeId.value = id;
       positionId.value = props?.dataRows?.posmasterId;
-      seletcId.value = props?.dataRows?.positionId;
+      selectId.value = props?.dataRows?.positionId;
       datePos.value = props?.dataRows?.reportingDate;
-
-      getDataTable(nodeId.value, level);
+      await getDataTable(nodeId.value, level);
     })
     .catch((e) => {
       messageError($q, e);
+    })
+    .finally(() => {
       hideLoader();
     });
 }
@@ -427,11 +433,6 @@ watch(
 
       if (props?.dataRows?.node !== null && props?.dataRows?.nodeId !== null) {
         await fetchPosFind(props?.dataRows?.node, props?.dataRows?.nodeId);
-        if (positionId.value) {
-          setTimeout(async () => {
-            await onClickSelectPos(positionId.value);
-          }, 200);
-        }
       } else {
         expanded.value = [];
       }
@@ -463,19 +464,15 @@ function fetchPositionUes() {
 
 watch(
   () => isAll.value,
-  (value, oldVal) => {
-    if (value !== oldVal) {
-      getDataTable(nodeId.value, nodeLevel.value);
-    }
+  () => {
+    getDataTable(nodeId.value, nodeLevel.value);
   }
 );
 
 watch(
   () => isBlank.value,
-  (value, oldVal) => {
-    if (value !== oldVal) {
-      getDataTable(nodeId.value, nodeLevel.value);
-    }
+  () => {
+    getDataTable(nodeId.value, nodeLevel.value);
   }
 );
 
@@ -491,35 +488,43 @@ function onSubmit() {
   const dataPosMaster = posMasterMain.value?.find(
     (e: any) => e.id === positionId.value
   );
+
+  if (!dataPosMaster) {
+    dialogMessageNotify($q, "ไม่พบข้อมูลตำแหน่ง");
+    return;
+  }
+
   if (selectedPos.value.length === 0) {
     dialogMessageNotify($q, "กรุณาเลือกตำแหน่ง");
-  } else {
-    dialogConfirm($q, async () => {
-      const body = {
-        personalId: props?.dataRows?.id,
-        node: dataPosMaster.node,
-        nodeId: dataPosMaster.nodeId,
-        orgRevisionId: formActive.activeId,
-        positionId: selectedPos.value[0].id,
-        posMasterNo: dataPosMaster.posMasterNo, //ตำแหน่งเลขที่(เลขอย่่างเดียว)
-        positionName: selectedPos.value[0].positionName, //ชื่อตำแหน่ง
-        positionField: selectedPos.value[0].positionField, //ชื่อตำแหน่ง
-        posTypeId: selectedPos.value[0].posTypeId, //ชื่อตำแหน่ง
-        posTypeName: selectedPos.value[0].posTypeName, //ชื่อตำแหน่ง
-        posLevelId: selectedPos.value[0].posLevelId, //ชื่อตำแหน่ง
-        posLevelName: selectedPos.value[0].posLevelName, //ชื่อตำแหน่ง
-        posExecutiveName: selectedPos.value[0].posExecutiveName, //ชื่อตำแหน่ง
-        reportingDate: convertDateToAPI(datePos.value),
-        posmasterId: dataPosMaster.id,
-        typeCommand: type.value,
-        positionExecutiveField: selectedPos.value[0].positionExecutiveField, //ด้านทางการบริหาร
-        positionArea: selectedPos.value[0].positionArea, //ด้าน/สาขา
-      };
-
-      await props.onSubmit?.(body);
-      close();
-    });
+    return;
   }
+
+  dialogConfirm($q, async () => {
+    const body = {
+      personalId: props?.dataRows?.id,
+      node: dataPosMaster.node,
+      nodeId: dataPosMaster.nodeId,
+      orgRevisionId: formActive.activeId,
+      positionId: selectedPos.value[0].id,
+      posMasterNo: dataPosMaster.posMasterNo, //ตำแหน่งเลขที่(เลขอย่่างเดียว)
+      positionName: selectedPos.value[0].positionName, //ชื่อตำแหน่ง
+      positionField: selectedPos.value[0].positionField, //ชื่อตำแหน่ง
+      posTypeId: selectedPos.value[0].posTypeId, //ชื่อตำแหน่ง
+      posTypeName: selectedPos.value[0].posTypeName, //ชื่อตำแหน่ง
+      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,
+      positionExecutiveField: selectedPos.value[0].positionExecutiveField, //ด้านทางการบริหาร
+      positionArea: selectedPos.value[0].positionArea, //ด้าน/สาขา
+    };
+
+    await props.onSubmit?.(body);
+    close();
+  });
 }
 
 function onSearch() {
@@ -534,6 +539,7 @@ onMounted(async () => {
   await fetchTree();
 });
 </script>
+
 <template>
   <q-dialog v-model="modal" persistent full-width>
     <q-card class="no-scroll">
@@ -565,7 +571,7 @@ onMounted(async () => {
             <q-tree
               class="q-pa-sm q-gutter-sm"
               dense
-              :nodes="lazy"
+              :nodes="nodes"
               node-key="orgTreeId"
               label-key="labelName"
               :filter="filter"
@@ -831,7 +837,7 @@ onMounted(async () => {
                             </q-toolbar>
                             <d-table
                               ref="table"
-                              :columns="columnsPostition"
+                              :columns="columnsPosition"
                               :rows="rowsPosition"
                               row-key="id"
                               flat
@@ -929,6 +935,7 @@ onMounted(async () => {
     </q-card>
   </q-dialog>
 </template>
+
 <style scoped>
 .my-list-link {
   color: rgb(118, 168, 222);

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:
-          e.orgShortname +
-          (e.posMasterNoPrefix != null ? e.posMasterNoPrefix : "") +
-          e.posMasterNo +
-          (e.posMasterNoSuffix != null ? e.posMasterNoSuffix : ""),
+        posMasterNo: formatPosmasterNo(
+          e.orgShortname,
+          e.posMasterNoPrefix,
+          e.posMasterNo.toString(),
+          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();
-      }, 1000);
+      hideLoader();
     });
 }
 

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) {
-  await http
+function fetchProfile(id: string, avatarName: string) {
+  http
     .get(config.API.fileByFile("ทะเบียนประวัติ", "โปรไฟล์", id, avatarName))
-    .then(async (res) => {
-      avatar.avatar = await res.data.downloadUrl;
+    .then((res) => {
+      avatar.avatar = res.data.downloadUrl;
+    })
+    .catch(() => {
+      avatar.avatar = avatarMain;
     });
 }
 

src/components/FooterContact.vue

@@ -0,0 +1,17 @@
+<template>
+  <div class="row items-center justify-center q-gutter-sm">
+    <q-icon name="support_agent" color="primary" size="sm" />
+    <span class="text-body2">
+      พบปัญหาการใช้งานกรุณาติดต่อผู้ดูแลระบบ
+      <span class="text-weight-medium text-primary"
+        ><a href="tel:0882649800" style="text-decoration: none; color: inherit"
+          >088-264-9800</a
+        >
+      </span>
+    </span>
+  </div>
+</template>
+
+<script setup lang="ts"></script>
+
+<style scoped></style>

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";
 
@@ -187,6 +186,7 @@ watch(modal, (val) => {
                 dense
                 label="คำค้น"
                 @clear="search = ''"
+                @keydown.enter.prevent="onSearchData()"
               />
             </div>
             <q-checkbox
@@ -253,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 props.edit?.(
-              props.dataNode?.orgTreeId,
-              type,
-              body,
-              props.dataNode?.orgRootCode
-            );
-            await props.fetchDataTable(
-              props?.dataNode?.orgTreeId,
-              props?.dataNode?.orgLevel,
-              false
-            );
+            await Promise.all([
+              await props.fetchDataTree(store.draftId),
+              await props.edit?.(
+                props.dataNode?.orgTreeId,
+                type,
+                body,
+                props.dataNode?.orgRootCode
+              ),
+              await props.fetchDataTable(
+                props?.dataNode?.orgTreeId,
+                props?.dataNode?.orgLevel,
+                false
+              ),
+            ]);
             await success($q, "บันทึกข้อมูลสำเร็จ");
             closeClear();
           })
@@ -231,6 +243,11 @@ function closeClear() {
   formData.isCommission = false;
   formData.isInformation = false;
   formData.misId = "";
+  formData.ROOT_CODE = "";
+  formData.CHILD1_CODE = "";
+  formData.CHILD2_CODE = "";
+  formData.CHILD3_CODE = "";
+  formData.CHILD4_CODE = "";
   formData.DEPARTMENT_CODE = "";
   formData.DIVISION_CODE = "";
   formData.SECTION_CODE = "";
@@ -456,6 +473,7 @@ watch(
       else {
         props.dataNode?.orgLevel === 1 && checkOfficer();
         if (props.dataNode) {
+          console.log(props.dataNode);
           formData.orgName = props.dataNode.orgTreeName;
           formData.orgShortName = props.dataNode.orgTreeShortName;
           formData.orgCode = props.dataNode.orgTreeCode;
@@ -474,6 +492,11 @@ watch(
           formData.DIVISION_CODE = props.dataNode.DIVISION_CODE;
           formData.SECTION_CODE = props.dataNode.SECTION_CODE;
           formData.JOB_CODE = props.dataNode.JOB_CODE;
+          formData.ROOT_CODE = props.dataNode.ROOT_CODE;
+          formData.CHILD1_CODE = props.dataNode.CHILD1_CODE;
+          formData.CHILD2_CODE = props.dataNode.CHILD2_CODE;
+          formData.CHILD3_CODE = props.dataNode.CHILD3_CODE;
+          formData.CHILD4_CODE = props.dataNode.CHILD4_CODE;
           orgLevelOption.value =
             props.dataNode.orgTreeRank === "DEPARTMENT"
               ? orgLevelOptionMain.value
@@ -730,6 +753,66 @@ watch(
                   </div>
                 </div>
               </div>
+              <div class="col-12">
+                <div class="col-12 row q-col-gutter-sm">
+                  <div class="col">
+                    <q-input
+                      v-model="formData.ROOT_CODE"
+                      dense
+                      outlined
+                      label="ROOT CODE"
+                      hide-bottom-space
+                      :class="classInput(false)"
+                      maxlength="3"
+                    />
+                  </div>
+                  <div class="col">
+                    <q-input
+                      v-model="formData.CHILD1_CODE"
+                      dense
+                      outlined
+                      label="CHILD1 CODE"
+                      hide-bottom-space
+                      :class="classInput(false)"
+                      maxlength="3"
+                    />
+                  </div>
+                  <div class="col">
+                    <q-input
+                      v-model="formData.CHILD2_CODE"
+                      dense
+                      outlined
+                      label="CHILD2 CODE"
+                      hide-bottom-space
+                      :class="classInput(false)"
+                      maxlength="3"
+                    />
+                  </div>
+                  <div class="col">
+                    <q-input
+                      v-model="formData.CHILD3_CODE"
+                      dense
+                      outlined
+                      label="CHILD3 CODE"
+                      hide-bottom-space
+                      :class="classInput(false)"
+                      maxlength="3"
+                    />
+                  </div>
+                  <div class="col">
+                    <q-input
+                      v-model="formData.CHILD4_CODE"
+                      dense
+                      outlined
+                      label="CHILD4 CODE"
+                      hide-bottom-space
+                      :class="classInput(false)"
+                      maxlength="3"
+                    />
+                  </div>
+                </div>
+              </div>
+
               <div class="col-12">
                 <q-input
                   v-model="formData.responsibility"

src/modules/02_organization/components/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()
       : "ว่าง",
   }));
 }
@@ -275,7 +277,7 @@ watch(
                         (store.typeOrganizational === "draft" ||
                           store.typeOrganizational === "old")
                       ? "2 (ปัจจุบัน)"
-                      : props.rowIndex + 1 
+                      : props.rowIndex + 1
                   }}
                 </div>
 

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",
   },
   {
@@ -1004,7 +1013,6 @@ watch(
                 table-class="text-grey-9"
                 row-key="id"
                 dense
-                hide-bottom
                 bordered
                 separator="vertical"
                 class="custom-header-table-expand"
@@ -1125,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,42 +363,62 @@ async function downloadFileDashboard() {
 }
 
 async function clickPassExam() {
-  showLoader();
-  await http
-    .get(config.API.exportExamPassExamList(examId.value))
-    .then(async (res) => {
-      const data = res.data.result;
-      data.reportName = `Candidate_Dashboard_${dateToISO(new Date())}`;
-      await genReport(data, data.reportName, "pdf");
-    })
-    .catch((e) => {
-      messageError($q, e);
-    })
-    .finally(() => {
-      hideLoader();
-    });
+  try {
+    showLoader();
+    const res = await http.get(
+      config.API.downloadCandidatePassExam(examId.value),
+      {
+        headers: {
+          "Content-Type": "application/pdf",
+          Accept: "application/pdf",
+        },
+        responseType: "blob",
+      }
+    );
+    const url = window.URL.createObjectURL(new Blob([res.data]));
+    const link = document.createElement("a");
+    link.href = url;
+    link.setAttribute(
+      "download",
+      `Candidate_Dashboard_${dateToISO(new Date())}` + ".pdf"
+    );
+    document.body.appendChild(link);
+    link.click();
+    document.body.removeChild(link);
+    window.URL.revokeObjectURL(url);
+  } catch (error) {
+    messageError($q, error);
+  } finally {
+    hideLoader();
+  }
 }
 
 async function clickCandidateList() {
-  showLoader();
-  await http
-    .get(config.API.exportExamCandidateList(examId.value))
-    .then(async (res) => {
-      const data = res.data.result;
-      data.reportName = `Candidate_Dashboard_${dateToISO(new Date())}`;
-      await genReport(data, data.reportName, "pdf");
-    })
-    .catch((e) => {
-      messageError($q, e);
-    })
-    .finally(() => {
-      hideLoader();
+  try {
+    showLoader();
+    const res = await http.get(config.API.downloadCandidateExam(examId.value), {
+      headers: {
+        "Content-Type": "application/pdf",
+        Accept: "application/pdf",
+      },
+      responseType: "blob",
     });
+    const url = window.URL.createObjectURL(new Blob([res.data]));
+    const link = document.createElement("a");
+    link.href = url;
+    link.setAttribute("download", "รายชื่อผู้มีสิทธิ์สอบ" + ".pdf");
+    document.body.appendChild(link);
+    link.click();
+    document.body.removeChild(link);
+    window.URL.revokeObjectURL(url);
+  } catch (error) {
+    messageError($q, error);
+  } finally {
+    hideLoader();
+  }
 }
 
 async function onCheckShowExaminfo() {
-  console.log(props.isShowExaminfo);
-
   dialogMessage(
     $q,
     `ยืนยันการ${props.isShowExaminfo ? "ปิด" : "เปิด"}`,
@@ -551,8 +571,20 @@ watch(
         </q-btn>
       </div>
       <div>
-        <q-btn icon="mdi-download" round color="green-6" flat>
-          <q-tooltip>ดาวน์โหลดไฟล์</q-tooltip>
+        <q-btn
+          icon="mdi-download"
+          round
+          color="green-6"
+          flat
+          :disable="attrs.rows.length === 0"
+        >
+          <q-tooltip>
+            {{
+              attrs.rows.length !== 0
+                ? "ดาวน์โหลดไฟล์"
+                : "ไม่มีข้อมูลผู้สอบคัดเลือก"
+            }}</q-tooltip
+          >
           <q-menu>
             <q-list style="min-width: 100px">
               <!-- <q-item clickable v-close-popup @click="downloadFileDashboard">

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

@@ -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/CompeteReport.vue

@@ -403,16 +403,6 @@ function clearFilter() {
       </div>
     </div>
   </q-form>
-
-  <div class="q-pa-sm q-gutter-sm">
-    <q-card flat bordered class="col-12">
-      <div class="row q-col-gutter-sm q-pa-sm">
-        <div class="row col-12 q-col-gutter-sm">
-          <q-space />
-        </div>
-      </div>
-    </q-card>
-  </div>
 </template>
 
 <style scoped></style>

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

@@ -112,7 +112,7 @@ const columns = ref<QTableProps["columns"]>([
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
     format(val, row) {
-      return `${row.year + 543}`;
+      return `${row.year ? row.year + 543 : "-"}`;
     },
     sort: (a: number, b: number) => b - a,
   },
@@ -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.scoreImportDate = r.score.importDate;
+            r.scoreCount = r.score.scoreCount ? r.score.scoreCount : 0;
+            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[]>([]);
@@ -212,17 +213,17 @@ const columnsPosition = ref<QTableProps["columns"]>([
       a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
   },
 
-  {
-    name: "type",
-    align: "left",
-    label: "ประเภทแบบฟอร์ม",
-    sortable: true,
-    field: "type",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-    sort: (a: string, b: string) =>
-      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
-  },
+  // {
+  //   name: "type",
+  //   align: "left",
+  //   label: "ประเภทแบบฟอร์ม",
+  //   sortable: true,
+  //   field: "type",
+  //   headerStyle: "font-size: 14px",
+  //   style: "font-size: 14px",
+  //   sort: (a: string, b: string) =>
+  //     a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  // },
 ]);
 
 const shouldShowPaymentFields = computed(() => {
@@ -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);
@@ -400,7 +402,7 @@ async function checkSave() {
 
     // เช็ค validation form ตำแหน่ง
     const isPositionFormValid = await myFormPosition.value?.validate();
-    if (!isPositionFormValid) return;
+    if (!isPositionFormValid && announcementExam.value) return;
 
     // เช็คการเพิ่มตำแหน่ง
     if (announcementExam.value && rowsPosition.value.length === 0) {
@@ -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;
 }
@@ -889,7 +895,7 @@ function fetchPosition(level: number) {
  * @param val ค่าประเภทตำแหน่ง 0 = ประเภททั่วไป ,1 = ประเภทวิชาการ
  * @param index ตำแหน่งของข้อมูล
  */
-function onUpdateHighDegree(val: string, index: string) {
+function onUpdateHighDegree(val: string, index: number) {
   rowsPosition.value[index].position = null;
   rowsPosition.value[index].level =
     val === "0" ? optionPosLevel1.value[0] : optionPosLevel2.value[0];
@@ -939,6 +945,14 @@ watch(
   }
 );
 
+function onUpdateScoreExpireDate(val: Date | null) {
+  if (val) {
+    const newDate = new Date(val);
+    newDate.setFullYear(newDate.getFullYear() + 2);
+    scoreExpireDate.value = newDate;
+  }
+}
+
 onMounted(async () => {
   hideLoader();
   if (route.params.id != undefined) {
@@ -1242,6 +1256,7 @@ onMounted(async () => {
               borderless
               :enableTimePicker="false"
               week-start="0"
+              @update:model-value="onUpdateScoreExpireDate"
             >
               <template #year="{ year }">
                 {{ year + 543 }}
@@ -1275,21 +1290,63 @@ onMounted(async () => {
               </template>
             </datepicker>
           </div>
-          <div class="row col-12" v-if="announcementExam">
-            <div class="col-xs-12 col-md-2">
-              <q-input
-                outlined
-                v-model="graduationYearLock"
-                label="ล็อกวันที่สำเร็จการศึกษา (ปี)"
-                dense
-                :readonly="checkRoutePermisson"
-                lazy-rules
-                :rules="[
+
+          <div class="col-xs-12 col-sm-3 col-md-3" v-if="announcementExam">
+            <datepicker
+              v-model="scoreExpireDate"
+              :locale="'th'"
+              autoApply
+              :readonly="checkRoutePermisson"
+              borderless
+              :enableTimePicker="false"
+              week-start="0"
+            >
+              <template #year="{ year }">
+                {{ year + 543 }}
+              </template>
+              <template #year-overlay-value="{ value }">
+                {{ parseInt(value + 543) }}
+              </template>
+              <template #trigger>
+                <q-input
+                  outlined
+                  :readonly="checkRoutePermisson"
+                  dense
+                  class="full-width datepicker q-mb-md"
+                  :model-value="
+                    scoreExpireDate != null ? date2Thai(scoreExpireDate) : null
+                  "
+                  :label="`${'วันหมดอายุบัญชี'}`"
+                  clearable
+                  @clear="scoreExpireDate = null"
+                  hide-bottom-space
+                >
+                  <template v-slot:prepend>
+                    <q-icon
+                      name="event"
+                      class="cursor-pointer"
+                      style="color: var(--q-primary)"
+                    >
+                    </q-icon>
+                  </template>
+                </q-input>
+              </template>
+            </datepicker>
+          </div>
+
+          <div class="col-xs-12 col-sm-2 col-md-2" v-if="announcementExam">
+            <q-input
+              outlined
+              v-model="graduationYearLock"
+              label="ล็อกวันที่สำเร็จการศึกษา (ปี)"
+              dense
+              :readonly="checkRoutePermisson"
+              lazy-rules
+              :rules="[
                   (val:string) => !!val || `${'กรุณากรอกล็อกวันที่สำเร็จการศึกษา (ปี)'}`,
                 ]"
-                type="number"
-              ></q-input>
-            </div>
+              type="number"
+            ></q-input>
           </div>
 
           <div class="col-12" v-if="announcementExam">
@@ -1476,7 +1533,7 @@ onMounted(async () => {
                       </div>
                     </q-td>
 
-                    <q-td key="type" :props="props">
+                    <!-- <q-td key="type" :props="props">
                       <selector
                         class=""
                         outlined
@@ -1490,7 +1547,7 @@ onMounted(async () => {
                         lazy-rules
                         :rules="[(val:any) => !!val || `${'กรุณาเลือกประเภทแบบฟอร์ม'}`]"
                       ></selector>
-                    </q-td>
+                    </q-td> -->
                   </q-tr>
                 </template>
               </ProfileTable>

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

@@ -260,7 +260,6 @@ async function fetchData(loading: boolean = true) {
         total.value = data.total;
         maxPage.value = await Math.ceil(data.total / pageSize.value);
         maxPage.value = maxPage.value < 1 ? 1 : maxPage.value;
-
         rows.value = [];
         data.data.map((r: any) => {
           rows.value.push({
@@ -402,6 +401,7 @@ onMounted(async () => {
   await fetchDataCom();
 });
 </script>
+
 <template>
   <div class="toptitle text-dark col-12 row items-center">
     <q-btn
@@ -474,9 +474,9 @@ onMounted(async () => {
       </div>
     </q-card>
   </q-slide-transition>
+
   <q-card flat bordered class="col-12 q-pt-sm">
     <TableCandidate
-      style="max-height: 80vh"
       :rows="rows"
       :columns="columns"
       :filter="filter"
@@ -603,6 +603,7 @@ onMounted(async () => {
       </template>
     </TableCandidate>
   </q-card>
+
   <q-dialog v-model="modal" persistent>
     <q-card style="min-width: 600px">
       <q-card-section class="row items-center q-py-sm">

src/modules/04_registryPerson/components/detail/Achievement/03_Insignia.vue

@@ -92,7 +92,7 @@ const baseColumns = ref<QTableColumn[]>([
     field: "year",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
-    format: (v) => v + 543,
+    format: (v) => (v ? v + 543 : "-"),
     sort: (a: string, b: string) =>
       a
         .toString()
@@ -920,9 +920,11 @@ onMounted(async () => {
                 :locale="'th'"
                 :enableTimePicker="false"
               >
-                <template #year="{ year }">{{ year + 543 }}</template>
+                <template #year="{ year }">{{
+                  year ? year + 543 : "-"
+                }}</template>
                 <template #year-overlay-value="{ value }">{{
-                  parseInt(value + 543)
+                  value ? parseInt(value + 543) : "-"
                 }}</template>
                 <template #trigger>
                   <q-input
@@ -930,7 +932,7 @@ onMounted(async () => {
                     outlined
                     hide-bottom-space
                     class="inputgreen"
-                    :model-value="insigniaForm.year !== 0 ? (insigniaForm.year as number) + 543 : null"
+                    :model-value="insigniaForm.year != null && insigniaForm.year !== 0 ? (insigniaForm.year as number) + 543 : null"
                     :rules="[
                     (val:string) =>
                       !!val ||

src/modules/04_registryPerson/components/detail/GovernmentInformation/01_Info.vue

@@ -50,18 +50,10 @@ const formMain = reactive<FormMain>({
   workDate: null, //วันที่เริ่มปฏิบัติราชการ
   reasonSameDate: "",
   retireDate: null, //วันเกษียณอายุ
-  ageAll: {
-    year: 0,
-    month: 0,
-    day: 0,
-  }, //อายุราชการ
+  ageAll: "", //อายุราชการ
   absent: 0, //ขาดราชการ
   age: 0, //อายุราชการเกื้อกูล
-  govAgeBkk:{
-    year: 0,
-    month: 0,
-    day: 0,
-  }
+  govAgeBkk: "",
 });
 
 const modalEdit = ref<boolean>(false); //แสดง popup แก้ไขข้อมูลราชการ
@@ -165,10 +157,22 @@ async function getData() {
       formMain.reasonSameDate = data.reasonSameDate;
       formMain.retireDate = data.dateLeave;
       formMain.dateRetireLaw = data.dateRetireLaw;
-      formMain.ageAll = data.govAge;
+      formMain.ageAll = data.govAge
+        ? (
+            (data.govAge.year > 0 ? `${data.govAge.year} ปี ` : "") +
+            (data.govAge.month > 0 ? `${data.govAge.month} เดือน ` : "") +
+            (data.govAge.day > 0 ? `${data.govAge.day} วัน` : "")
+          ).trim() || "-"
+        : "-";
       formMain.absent = data.govAgeAbsent;
       formMain.age = data.govAgePlus;
-      formMain.govAgeBkk = data.govAgeBkk;
+      formMain.govAgeBkk = data.govAgeBkk
+        ? (
+            (data.govAgeBkk.year > 0 ? `${data.govAgeBkk.year} ปี ` : "") +
+            (data.govAgeBkk.month > 0 ? `${data.govAgeBkk.month} เดือน ` : "") +
+            (data.govAgeBkk.day > 0 ? `${data.govAgeBkk.day} วัน` : "")
+          ).trim() || "-"
+        : "-";
     })
     .catch((e) => {
       messageError($q, e);
@@ -455,25 +459,19 @@ onMounted(() => {
               <span class="text-grey-6 text-weight-medium">อายุราชการ</span>
             </div>
             <div class="col-12 col-sm-12 col-md-7">
-              <span>{{
-                formMain.ageAll
-                  ? `${formMain.ageAll.year} ปี ${formMain.ageAll.month} เดือน ${formMain.ageAll.day} วัน`
-                  : "-"
-              }}</span>
+              <span>{{ formMain.ageAll }}</span>
             </div>
           </div>
         </div>
         <div class="col-12 col-sm-6 col-md-6">
           <div class="row">
             <div class="col-12 col-sm-12 col-md-5">
-              <span class="text-grey-6 text-weight-medium">อายุราชการ (กทม.)</span>
+              <span class="text-grey-6 text-weight-medium"
+                >อายุราชการ (กทม.)</span
+              >
             </div>
             <div class="col-12 col-sm-12 col-md-7">
-                    <span>{{
-                formMain.govAgeBkk
-                  ? `${formMain.govAgeBkk.year} ปี ${formMain.govAgeBkk.month} เดือน ${formMain.govAgeBkk.day} วัน`
-                  : "-"
-              }}</span>
+              <span>{{ formMain.govAgeBkk }}</span>
             </div>
           </div>
         </div>

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 rowsMain = ref<RequestItemsObject[]>([]); //รายการวินัย
+const rows = ref<Discipline[]>([]); //รายการวินัย
+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/03_Leave.vue

@@ -202,6 +202,17 @@ const pagination = ref({
 const columnsHistory = ref<QTableColumn[]>(baseColumns.value);
 const visibleColumnsHistory = ref<string[]>(baseVisibleColumns.value);
 
+/** รายการประเภทการลาของ ลาไปศึกษา ฝึกอบรม ปฎิบัติการวิจัย หรือดูงาน*/
+const leaveSubTypeName = ref<string>("");
+const optionSubTypeName = ref<string[]>([
+  "ศึกษาต่อ",
+  "ฝึกอบรม",
+  "ปฎิบัติการวิจัย",
+  "ดูงาน",
+]);
+
+const coupleDayLevelCountry = ref<string>("");
+
 /** function fetch ข้อมูลรายการลา*/
 async function getData() {
   showLoader();
@@ -213,6 +224,7 @@ async function getData() {
         ...item,
         id: item.id,
         typeLeave: item.leaveType.name,
+        codeLeave: item.leaveType.code,
         code: item.leaveType.refCommandDate,
         dateStartLeave: item.dateLeaveStart,
         dateEndLeave: item.dateLeaveEnd,
@@ -292,8 +304,10 @@ function openDialogEdit(props: DetailData) {
   typeLeave.value = {
     id: props.typeLeaveId,
     name: props.typeLeave,
-    code: props.code,
+    code: props.codeLeave,
   };
+  leaveSubTypeName.value = props.leaveSubTypeName;
+  coupleDayLevelCountry.value = props.coupleDayLevelCountry;
   statLeave.value = props.status;
   reason.value = props.reason;
   dateRange.value = [
@@ -316,6 +330,10 @@ function onSubmit() {
 
     const body = {
       leaveTypeId: typeLeave.value?.id,
+      leaveSubTypeName:
+        typeLeave.value?.code === "LV-008" ? leaveSubTypeName.value : undefined,
+      coupleDayLevelCountry:
+        typeLeave.value?.code === "LV-010" ? coupleDayLevelCountry.value : undefined,
       dateLeaveStart: dateToISO(dateRange.value[0]),
       dateLeaveEnd: dateToISO(dateRange.value[1]),
       leaveDays: numLeave.value,
@@ -451,6 +469,8 @@ function closeDialog() {
   dateRange.value = [new Date(), new Date()];
   numLeave.value = 1;
   numUsedLeave.value = 0;
+  leaveSubTypeName.value = "";
+  coupleDayLevelCountry.value = "";
 }
 
 function statusLeave(val: string) {
@@ -741,6 +761,43 @@ onMounted(() => {
                       ) "
               />
             </div>
+
+            <div
+              class="col-xs-6 col-sm-6 col-md-6"
+              v-if="
+                typeLeave?.code === 'LV-008' || typeLeave?.code === 'LV-010'
+              "
+            >
+              <q-select
+                v-if="typeLeave?.code === 'LV-008'"
+                ref="typeLeaveRef"
+                class="full-width inputgreen cursor-pointer"
+                outlined
+                dense
+                lazy-rules
+                :label="`${'ประเภท'}`"
+                :rules="[(val:string) => !!val || `${'กรุณาเลือกประเภท'}`]"
+                v-model="leaveSubTypeName"
+                :options="optionSubTypeName"
+                option-value="id"
+                option-label="name"
+                emit-value
+                map-options
+                hide-bottom-space
+              />
+              <q-input
+                v-if="typeLeave?.code === 'LV-010'"
+                ref="numLeaveRef"
+                class="full-width inputgreen cursor-pointer"
+                outlined
+                dense
+                lazy-rules
+                v-model="coupleDayLevelCountry"
+                :rules="[(val:string) => !!val || `${'กรุณากรอกประเทศที่ลาติดตามคู่สมรส'}`]"
+                hide-bottom-space
+                :label="`${'ประเทศที่ลาติดตามคู่สมรส'}`"
+              />
+            </div>
             <div class="col-xs-6 col-sm-6 col-md-6">
               <datepicker
                 :readonly="!typeLeave"

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/07_Position.vue

@@ -402,6 +402,7 @@ const modalDialogSalary = ref<boolean>(false); //แสดง popup ตำแห
 const isStatusEdit = ref<boolean>(false); //สถานะแก้ไขข้อมูลตำแหน่งเงินเดือน
 const salaryId = ref<string>(""); //id ที่ต้องการแก้ไข
 const dataLevel = ref<DataPosType[]>([]); //รายการ ตำแหน่งเงินเดือน
+const idCommandId = ref<boolean>(false); //เช็คว่ามี commandId หรือไม่
 
 const commandCodeOptions = ref<DataOption[]>(store.commandCodeData); //รายการปรเภทคำสั่ง
 const posTypeOptions = ref<DataOption[]>(store.posTypeData); //รายการประเภทตำแหน่ง | กลุ่มงาน
@@ -658,6 +659,7 @@ async function onClickOpenDialog(
   } else {
     await fetchOptionGroup();
   }
+  idCommandId.value = statusEdit ? (data.commandId ? true : false) : false;
   commandCodeOptions.value = store.commandCodeData;
   posTypeOptions.value = store.posTypeData;
   posLevelOptions.value = store.posLevelData;
@@ -978,6 +980,7 @@ onMounted(async () => {
               <q-tooltip>ประวัติแก้ไขตำแหน่ง/เงินเดือน</q-tooltip>
             </q-btn>
 
+            <!-- :disable="(props.row.commandId !== null && props.row.commandId !== '') || props.row.commandType === 'C-PM-47'" -->
             <q-btn
               v-if="
                 !isLeave &&
@@ -985,11 +988,7 @@ onMounted(async () => {
                 checkPermission($route)?.attrOwnership === 'OWNER'
               "
               flat
-              :disable="
-                (props.row.commandId !== null && props.row.commandId !== '') ||
-                props.row.commandType === 'C-PM-47'
-              "
-              :color="props.row.commandId ? 'grey' : 'edit'"
+              color="edit"
               dense
               round
               icon="edit"
@@ -1154,7 +1153,8 @@ onMounted(async () => {
               <div class="row q-col-gutter-sm">
                 <div class="col-6">
                   <q-input
-                    :class="classInput(true)"
+                    :class="classInput(!idCommandId)"
+                    :readonly="idCommandId"
                     outlined
                     dense
                     lazy-rules
@@ -1174,7 +1174,8 @@ onMounted(async () => {
                     autoApply
                     year-picker
                     :enableTimePicker="false"
-                    class="inputgreen"
+                    :class="classInput(!idCommandId)"
+                    :disabled="idCommandId"
                   >
                     <template #year="{ year }">{{ year + 543 }}</template>
                     <template #year-overlay-value="{ value }">{{
@@ -1191,6 +1192,8 @@ onMounted(async () => {
                             : formData.commandYear + 543
                         "
                         label="ปี พ.ศ."
+                        :class="classInput(!idCommandId)"
+                        :readonly="idCommandId"
                       >
                         <template v-slot:prepend>
                           <q-icon

src/modules/04_registryPerson/components/detail/GovernmentInformation/08_AbsentLate.vue

@@ -0,0 +1,424 @@
+<script setup lang="ts">
+import { ref, onMounted, reactive } from "vue";
+import { useQuasar } from "quasar";
+
+import { useRoute } from "vue-router";
+import { checkPermission } from "@/utils/permissions";
+import { useCounterMixin } from "@/stores/mixin";
+import { useAbsentLateStore } from "@/modules/04_registryPerson/stores/AbsentLate";
+import http from "@/plugins/http";
+import config from "@/app.config";
+
+import type { QTableColumn } from "quasar";
+import type { ResAbsentLateData} from "@/modules/04_registryPerson/interface/response/Government";
+
+import DialogAbsentLate from "@/modules/04_registryPerson/components/detail/GovernmentInformation/08_DialogAbsentLate.vue";
+import DialogHistory from "@/modules/04_registryPerson/components/detail/DialogHistory.vue";
+
+const route = useRoute();
+const absentLateStore = useAbsentLateStore();
+const $q = useQuasar();
+const {
+  date2Thai,
+  dialogConfirm,
+  showLoader,
+  hideLoader,
+  messageError,
+  success,
+  pathRegistryEmp,
+  onSearchDataTable,
+  convertDateToAPI,
+  dialogRemove,
+} = useCounterMixin();
+
+const profileId = ref<string>(
+  route.params.id ? route.params.id.toString() : ""
+);
+const empType = ref<string>(pathRegistryEmp(route.name?.toString() ?? ""));
+
+const isLeave = defineModel<boolean>("isLeave", {
+  required: true,
+});
+
+const baseColumns = ref<QTableColumn[]>([
+  {
+    name: "status",
+    align: "left",
+    label: "มาสาย/ ขาดราชการ",
+    sortable: true,
+    field: "status",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    format(val, row) {
+      const status = absentLateStore.statusOps.find(
+        (option) => option.id === val
+      );
+      return status ? status.name : val;
+    },
+  },
+  {
+    name: "stampDate",
+    align: "left",
+    label: "วันที่ลงเวลา",
+    sortable: true,
+    field: "stampDate",
+    format: (v) => date2Thai(v),
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "stampType",
+    align: "left",
+    label: "ประเภทการลงเวลา",
+    sortable: true,
+    field: "stampType",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    format(val) {
+      const type = absentLateStore.stampTypeOps.find(
+        (option) => option.id === val
+      );
+      return type ? type.name : val;
+    },
+  },
+  {
+    name: "stampAmount",
+    align: "left",
+    label: "จำนวน",
+    sortable: true,
+    field: "stampAmount",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "remark",
+    align: "left",
+    label: "หมายเหตุ",
+    sortable: true,
+    field: "remark",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+]);
+const baseVisibleColumns = ref<string[]>([
+  "status",
+  "stampDate",
+  "stampType",
+  "stampAmount",
+  "remark",
+]);
+
+/** Table*/
+const rows = ref<ResAbsentLateData[]>([]);
+const rowsMain = ref<ResAbsentLateData[]>([]);
+const mode = ref<string>("table"); //การแสดงผล Table card
+const filterKeyword = ref<string>(""); //คำค้นหา
+const columns = ref<QTableColumn[]>(
+  baseColumns.value.filter((e: QTableColumn) => e.name !== "lastUpdateFullName")
+);
+const visibleColumns = ref<string[]>(
+  baseVisibleColumns.value.filter((e: string) => e !== "lastUpdateFullName")
+);
+const pagination = ref({
+  sortBy: "lastUpdatedAt",
+});
+
+const columnsHistory = ref<QTableColumn[]>(baseColumns.value);
+const visibleColumnsHistory = ref<string[]>(baseVisibleColumns.value);
+
+/** Dialog*/
+const isStatusEdit = ref<boolean>(false);
+const modal = ref<boolean>(false);
+const modalHistory = ref<boolean>(false);
+const rowId = ref<string>("");
+const dataAbsentLate = ref<ResAbsentLateData | null>(null);
+
+async function fetchData() {
+  showLoader();
+  try {
+    const res = await http.get(
+      config.API.profileAbsentLate(empType.value) + `/${profileId.value}`
+    );
+    const data = res.data.result;
+    rowsMain.value = data;
+    serchDataTable();
+  } catch (err) {
+    messageError($q, err);
+  } finally {
+    hideLoader();
+  }
+}
+
+/** function fetch ข้อมูลประวัติการแก้ไขข้อมูล*/
+async function fetchDataHistory() {
+  showLoader();
+  try {
+    const res = await http.get(
+      config.API.profileAbsentLateHistory(rowId.value, empType.value)
+    );
+    return res.data.result;
+  } catch (err) {
+    messageError($q, err);
+  } finally {
+    hideLoader();
+  }
+}
+
+function openEditDialog(data: any) {
+  modal.value = true;
+  isStatusEdit.value = true;
+  rowId.value = data.id;
+  dataAbsentLate.value = data;
+}
+
+function showHistoryDialog(id: string) {
+  modalHistory.value = true;
+  rowId.value = id;
+}
+
+/** ฟังก์ค้นหาข้อมูลขาดราชการ/มาสาย*/
+function serchDataTable() {
+  rows.value = onSearchDataTable(
+    filterKeyword.value,
+    rowsMain.value,
+    columns.value ? columns.value : []
+  );
+}
+
+function onDelete(rowId: string) {
+  dialogRemove($q, async () => {
+    showLoader();
+    try {
+      await http.patch(
+        config.API.profileAbsentLateUpdateDelete(empType.value) + `/${rowId}`
+      );
+      await fetchData();
+      await success($q, "ลบข้อมูลสำเร็จ");
+    } catch (err) {
+      messageError($q, err);
+    } finally {
+      hideLoader();
+    }
+  });
+}
+
+onMounted(() => {
+  fetchData();
+});
+</script>
+
+<template>
+  <div class="row items-center q-gutter-x-sm q-pb-sm">
+    <q-btn
+      v-if="!isLeave && checkPermission($route)?.attrIsUpdate"
+      dense
+      color="primary"
+      icon="add"
+      flat
+      round
+      @click.stop.prevent="(modal = true), (isStatusEdit = false)"
+    >
+      <q-tooltip>เพิ่มข้อมูล</q-tooltip>
+    </q-btn>
+
+    <q-space />
+    <q-input
+      standout
+      dense
+      v-model="filterKeyword"
+      ref="filterRef"
+      outlined
+      placeholder="ค้นหา"
+      @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"
+    />
+    <q-btn-toggle
+      v-model="mode"
+      dense
+      class="no-shadow toggle-borderd"
+      toggle-color="grey-4"
+      :options="[
+        { value: 'table', slot: 'table' },
+        { value: 'card', slot: 'card' },
+      ]"
+    >
+      <template v-slot:table>
+        <q-icon
+          name="format_list_bulleted"
+          size="24px"
+          :style="{
+            color: mode === 'table' ? '#787B7C' : '#C9D3DB',
+          }"
+        />
+      </template>
+
+      <template v-slot:card>
+        <q-icon
+          name="mdi-view-grid-outline"
+          size="24px"
+          :style="{
+            color: mode === 'card' ? '#787B7C' : '#C9D3DB',
+          }"
+        />
+      </template>
+    </q-btn-toggle>
+  </div>
+
+  <d-table
+    :grid="mode === 'card'"
+    ref="table"
+    row-key="id"
+    flat
+    bordered
+    dense
+    :columns="columns"
+    :rows="rows"
+    :visible-columns="visibleColumns"
+    v-model:pagination="pagination"
+  >
+    >
+    <template v-slot:header="props">
+      <q-tr :props="props">
+        <q-th auto-width></q-th>
+        <q-th v-for="col in props.cols" :key="col.name" :props="props">
+          <span class="text-weight-medium">{{ col.label }}</span>
+        </q-th>
+      </q-tr>
+    </template>
+    <template v-slot:body="props" v-if="mode === 'table'">
+      <q-tr :props="props">
+        <q-td auto-width>
+          <q-btn
+            flat
+            dense
+            round
+            color="deep-purple"
+            icon="mdi-history"
+            @click.stop.prevent="showHistoryDialog(props.row.id)"
+          >
+            <q-tooltip>ประวัติแก้ไขขาดราชการ/มาสาย</q-tooltip>
+          </q-btn>
+          <q-btn
+            v-if="!isLeave && checkPermission($route)?.attrIsUpdate"
+            flat
+            dense
+            round
+            color="edit"
+            icon="edit"
+            @click.stop.prevent="openEditDialog(props.row)"
+          >
+            <q-tooltip>แก้ไขข้อมูล</q-tooltip>
+          </q-btn>
+
+          <q-btn
+            v-if="!isLeave && checkPermission($route)?.attrIsDelete"
+            flat
+            dense
+            round
+            color="red"
+            icon="delete"
+            @click.stop.prevent="onDelete(props.row.id)"
+          >
+            <q-tooltip>ลบข้อมูล</q-tooltip>
+          </q-btn>
+        </q-td>
+        <q-td v-for="col in props.cols" :key="col.id">
+          <div>
+            {{ col.value ? col.value : "-" }}
+          </div>
+        </q-td>
+      </q-tr>
+    </template>
+    <template v-slot:item="props" v-else>
+      <div class="q-pa-xs col-xs-12 col-sm-4 col-md-3">
+        <q-card flat bordered>
+          <q-card-actions align="right" class="bg-grey-3">
+            <q-btn
+              color="deep-purple"
+              icon="mdi-history"
+              flat
+              round
+              @click.stop.prevent="showHistoryDialog(props.row.id)"
+            >
+              <q-tooltip>ประวัติแก้ไขขาดราชการ/มาสาย</q-tooltip>
+            </q-btn>
+
+            <q-btn
+              v-if="isLeave === false && checkPermission($route)?.attrIsUpdate"
+              :color="props.row.commandId ? 'grey-5' : 'edit'"
+              :disable="props.row.commandId !== null"
+              icon="edit"
+              flat
+              round
+              @click.stop.prevent="openEditDialog(props.row)"
+            >
+              <q-tooltip>แก้ไขข้อมูล</q-tooltip>
+            </q-btn>
+
+            <q-btn
+              v-if="isLeave === false && checkPermission($route)?.attrIsDelete"
+              color="red"
+              icon="delete"
+              flat
+              round
+              @click.stop.prevent="onDelete(props.row.id)"
+            >
+              <q-tooltip>ลบข้อมูล</q-tooltip>
+            </q-btn>
+          </q-card-actions>
+          <q-separator />
+
+          <q-list>
+            <div
+              :class="`row q-pa-sm`"
+              :style="`background-color: ${index % 2 !== 0 ? '#FAFAFA' : ''}`"
+              v-for="(col, index) in props.cols"
+              :key="col.name"
+            >
+              <div class="col text-grey-6">
+                <div>{{ col.label }}</div>
+              </div>
+              <div class="col">
+                <div>{{ col.value ? col.value : "-" }}</div>
+              </div>
+            </div>
+          </q-list>
+        </q-card>
+      </div>
+    </template>
+  </d-table>
+
+  <DialogAbsentLate
+    v-model:modal="modal"
+    v-model:isStatusEdit="isStatusEdit"
+    :fetchData="fetchData"
+    :rowId="rowId"
+    :dataAbsentLate="dataAbsentLate"
+  />
+
+  <DialogHistory
+    v-model:modal="modalHistory"
+    :title="`ประวัติแก้ไขขาดราชการ/มาสาย`"
+    :columns="columnsHistory"
+    :visible-columns="visibleColumnsHistory"
+    :fetch-data="fetchDataHistory"
+  />
+</template>
+
+<style scoped></style>

src/modules/04_registryPerson/components/detail/GovernmentInformation/08_DialogAbsentLate.vue

@@ -0,0 +1,263 @@
+<script setup lang="ts">
+import { reactive, ref, computed, watch } from "vue";
+import { useQuasar } from "quasar";
+
+import { useRoute } from "vue-router";
+import { useCounterMixin } from "@/stores/mixin";
+import { useAbsentLateStore } from "@/modules/04_registryPerson/stores/AbsentLate";
+import http from "@/plugins/http";
+import config from "@/app.config";
+
+/** import components*/
+import DialogHeader from "@/components/DialogHeader.vue";
+
+//use
+const $q = useQuasar();
+const route = useRoute();
+const absentLateStore = useAbsentLateStore();
+const {
+  showLoader,
+  hideLoader,
+  messageError,
+  success,
+  date2Thai,
+  convertDateToAPI,
+  dialogConfirm,
+  pathRegistryEmp,
+} = useCounterMixin();
+
+//props
+const modal = defineModel<boolean>("modal", { required: true });
+const isStatusEdit = defineModel<boolean>("isStatusEdit", { required: true });
+const rowId = defineModel<string>("rowId", { required: true });
+
+const props = defineProps<{
+  fetchData: () => Promise<void>;
+  dataAbsentLate: any;
+}>();
+
+const profileId = ref<string>(route.params.id?.toString() ?? ""); //ProfileId
+const empType = ref<string>(pathRegistryEmp(route.name?.toString() ?? ""));
+
+const form = reactive({
+  status: "",
+  stampDate: new Date(),
+  stampType: "FULL_DAY",
+  stampAmount: "1.0",
+  remark: "",
+});
+
+const tittle = computed(() => {
+  return isStatusEdit.value
+    ? "แก้ไขข้อมูลขาดราชการ/มาสาย"
+    : "เพิ่มข้อมูลขาดราชการ/มาสาย";
+});
+
+function onSubmit() {
+  dialogConfirm($q, async () => {
+    try {
+      showLoader();
+      const payload = {
+        ...form,
+        stampDate: convertDateToAPI(form.stampDate),
+        profileId:
+          !isStatusEdit.value && empType.value === ""
+            ? profileId.value
+            : undefined,
+        profileEmployeeId:
+          !isStatusEdit.value && empType.value !== ""
+            ? profileId.value
+            : undefined,
+      };
+      const method = isStatusEdit.value ? "patch" : "post";
+      const url = isStatusEdit.value
+        ? config.API.profileAbsentLate(empType.value) + `/${rowId.value}`
+        : config.API.profileAbsentLate(empType.value);
+      await http[method](url, payload);
+      success($q, "บันทึกข้อมูลสำเร็จ");
+      props.fetchData();
+      closeDialog();
+    } catch (error) {
+      messageError($q, error);
+    } finally {
+      hideLoader();
+    }
+  });
+}
+
+/** function ปิด popup*/
+function closeDialog() {
+  modal.value = false;
+}
+
+watch(
+  () => form.stampType,
+  (stampType) => {
+    if (stampType === "FULL_DAY") {
+      form.stampAmount = "1.0";
+    } else if (stampType === "MORNING" || stampType === "AFTERNOON") {
+      form.stampAmount = "0.5";
+    }
+  }
+);
+
+watch(
+  () => modal.value,
+  (newVal) => {
+    if (newVal) {
+      form.status = isStatusEdit.value ? props.dataAbsentLate.status : "";
+      form.stampDate = isStatusEdit.value
+        ? new Date(props.dataAbsentLate.stampDate)
+        : new Date();
+      form.stampType = isStatusEdit.value
+        ? props.dataAbsentLate.stampType
+        : "FULL_DAY";
+      form.stampAmount = isStatusEdit.value
+        ? props.dataAbsentLate.stampAmount
+        : "1.0";
+      form.remark = isStatusEdit.value ? props.dataAbsentLate.remark : "";
+    }
+  }
+);
+</script>
+
+<template>
+  <q-dialog v-model="modal" persistent>
+    <q-card style="min-width: 50vw">
+      <q-form greedy @submit.prevent="onSubmit">
+        <DialogHeader :tittle="tittle" :close="closeDialog" />
+        <q-separator />
+
+        <q-card-section class="q-pa-md">
+          <div class="col-12 row q-col-gutter-sm">
+            <div class="col-12 row">
+              <div class="col-md-4 col-sm-12">
+                <q-select
+                  class="full-width inputgreen cursor-pointer"
+                  outlined
+                  dense
+                  lazy-rules
+                  v-model="form.status"
+                  :rules="[(val:string) => !!val || `${'กรุณาเลือกสถานะ'}`]"
+                  hide-bottom-space
+                  :label="`${'สถานะ'}`"
+                  map-options
+                  emit-value
+                  option-label="name"
+                  option-value="id"
+                  :options="absentLateStore.statusOps"
+                  use-input
+                  hide-selected
+                  fill-input
+                  input-debounce="0"
+                />
+              </div>
+            </div>
+
+            <div class="col-md-4 col-sm-12">
+              <datepicker
+                class="inputgreen"
+                menu-class-name="modalfix"
+                v-model="form.stampDate"
+                :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
+                    hide-bottom-space
+                    class="full-width"
+                    :model-value="
+                      form.stampDate != null ? date2Thai(form.stampDate) : null
+                    "
+                    :label="`${'วันที่ลงเวลา'}`"
+                    :rules="[
+                              (val: string) =>
+                                !!val || `${'กรุณาเลือกวันที่ลงเวลา'}`,
+                            ]"
+                  >
+                    <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-md-4 col-xs-12">
+              <q-select
+                class="full-width inputgreen cursor-pointer"
+                outlined
+                dense
+                lazy-rules
+                v-model="form.stampType"
+                :rules="[(val:string) => !!val || `${'กรุณาเลือกประเภทการลงเวลา'}`]"
+                hide-bottom-space
+                :label="`${'ประเภทการลงเวลา'}`"
+                map-options
+                emit-value
+                option-label="name"
+                :options="absentLateStore.stampTypeOps"
+                option-value="id"
+                use-input
+                hide-selected
+                fill-input
+                input-debounce="0"
+              />
+            </div>
+
+            <div class="col-md-4 col-xs-12">
+              <q-input
+                class="inputgreen"
+                dense
+                outlined
+                v-model="form.stampAmount"
+                label="จำนวน"
+                hide-bottom-space
+                readonly
+                :rules="[(val:string) => !!val ||
+              `${'กรุณากรอกจำนวน'}`]"
+                mask="#.#"
+              />
+            </div>
+
+            <div class="col-12">
+              <q-input
+                class="inputgreen"
+                dense
+                outlined
+                v-model="form.remark"
+                label="เหตุผล"
+                hide-bottom-space
+                type="textarea"
+              />
+            </div>
+          </div>
+        </q-card-section>
+        <q-separator />
+
+        <q-card-actions align="right">
+          <q-btn type="submit" :label="`บันทึก`" color="public">
+            <q-tooltip>บันทึก</q-tooltip>
+          </q-btn>
+        </q-card-actions>
+      </q-form>
+    </q-card>
+  </q-dialog>
+</template>
+
+<style scoped></style>

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

@@ -14,6 +14,7 @@ import PerformSpecialWork from "@/modules/04_registryPerson/components/detail/Go
 import ActingPos from "@/modules/04_registryPerson/components/detail/GovernmentInformation/05_ActingPos.vue"; //รักษาการในตำแหน่ง
 import HelpGovernmentDetail from "@/modules/04_registryPerson/components/detail/GovernmentInformation/06_HelpGovernment.vue"; //ช่วยราชการ
 import Postion from "@/modules/04_registryPerson/components/detail/GovernmentInformation/07_Position.vue";
+import AbsentLate from "@/modules/04_registryPerson/components/detail/GovernmentInformation/08_AbsentLate.vue";
 import { useRegistryNewDataStore } from "@/modules/04_registryPerson/store";
 
 const empType = ref<string>(pathRegistryEmp(route.name?.toString() ?? ""));
@@ -47,6 +48,7 @@ const storeRegistry = useRegistryNewDataStore();
     <q-tab v-if="empType != '-employee'" name="6" label="ช่วยราชการ" />
     <q-tab name="2" label="วินัย" />
     <q-tab name="3" label="การลา" />
+    <q-tab name="8" label="ขาดราชการ/มาสาย" />
     <q-tab name="4" label="ปฏิบัติราชการพิเศษ" />
   </q-tabs>
   <q-separator />
@@ -56,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" />
@@ -76,6 +81,9 @@ const storeRegistry = useRegistryNewDataStore();
         :citizen-id="storeRegistry.citizenId"
       />
     </q-tab-panel>
+    <q-tab-panel name="8">
+      <AbsentLate :is-leave="storeRegistry.isLeave" />
+    </q-tab-panel>
     <q-tab-panel name="7">
       <Postion
         :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",
@@ -406,6 +406,13 @@ function calculateMinDate() {
   return today;
 }
 
+function prefixRankRule() {
+  return [
+    () =>
+      !!formData.rank || !!formData.prefix || "กรุณาเลือกคำนำหน้าชื่อ หรือยศ",
+  ];
+}
+
 /** ดูการเปลี่ยนแปลงของวันเกิดเมื่อมีการเปลี่ยนแปลงจะคำนวนอายูใหม่*/
 watch(
   () => formData.birthDate,
@@ -582,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
@@ -596,10 +605,10 @@ onMounted(() => {
                 option-value="name"
                 v-model="formData.prefix"
                 clearable
-                class="inputgreen"
                 :options="store.Ops.prefixOps"
                 :label="dataLabel.prefix"
-                :rules="[(val: string) => !!formData.rank || !!formData.prefix || `${'กรุณาเลือกคำนำหน้าชื่อ หรือยศ'}`]"
+                :rules="prefixRankRule()"
+                reactive-rules
                 @filter="(inputValue: string,
               doneFn: Function) => filterSelector(inputValue, doneFn, 'prefixOps'
               )"
@@ -620,7 +629,8 @@ onMounted(() => {
                 input-debounce="0"
                 option-label="name"
                 option-value="name"
-                :rules="[(val: string) => !!formData.rank || !!formData.prefix || `${'กรุณาเลือกคำนำหน้าชื่อ หรือยศ'}`]"
+                :rules="prefixRankRule()"
+                reactive-rules
                 v-model="formData.rank"
                 class="inputgreen"
                 :options="store.Ops.rankOps"
@@ -632,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 || `${'กรุณากรอก นามสกุล'}`]"
               />
@@ -713,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
@@ -727,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/components/detail/Salary/01_PositionSalary.vue

@@ -66,6 +66,7 @@ const keyword = ref<string>(""); //คำค้นหา
 const modalCommand = ref<boolean>(false);
 const command = ref<string>("");
 const commandId = ref<string>("");
+const idCommandId = ref<boolean>(false); //สถานะการมีคำสั่ง
 const baseColumns = ref<QTableColumn[]>([
   {
     name: "commandDateAffect",
@@ -638,6 +639,7 @@ async function onClickOpenDialog(
   } else {
     await fetchOptionGroup();
   }
+  idCommandId.value = statusEdit && data.commandId ? true : false;
   commandCodeOptions.value = store.commandCodeData;
   posTypeOptions.value = store.posTypeData;
   posLevelOptions.value = store.posLevelData;
@@ -939,6 +941,10 @@ onMounted(async () => {
             >
               <q-tooltip>ประวัติแก้ไขตำแหน่ง/เงินเดือน</q-tooltip>
             </q-btn>
+            <!-- :disable="
+              (props.row.commandId !== null && props.row.commandId !== '') ||
+              props.row.commandType === 'C-PM-47'
+            " -->
             <q-btn
               v-if="
                 !isLeave &&
@@ -946,11 +952,7 @@ onMounted(async () => {
                 checkPermission($route)?.attrOwnership === 'OWNER'
               "
               flat
-              :disable="
-                (props.row.commandId !== null && props.row.commandId !== '') ||
-                props.row.commandType === 'C-PM-47'
-              "
-              :color="props.row.commandId ? 'grey' : 'edit'"
+              color="edit"
               dense
               round
               icon="edit"
@@ -1119,7 +1121,8 @@ onMounted(async () => {
               <div class="row q-col-gutter-sm">
                 <div class="col-6">
                   <q-input
-                    :class="classInput(true)"
+                    :class="classInput(!idCommandId)"
+                    :readonly="idCommandId"
                     outlined
                     dense
                     lazy-rules
@@ -1139,7 +1142,8 @@ onMounted(async () => {
                     autoApply
                     year-picker
                     :enableTimePicker="false"
-                    class="inputgreen"
+                    :class="classInput(!idCommandId)"
+                    :disable="idCommandId"
                   >
                     <template #year="{ year }">{{ year + 543 }}</template>
                     <template #year-overlay-value="{ value }">{{
@@ -1156,6 +1160,8 @@ onMounted(async () => {
                             : formData.commandYear + 543
                         "
                         label="ปี พ.ศ."
+                        :class="classInput(!idCommandId)"
+                        :readonly="idCommandId"
                       >
                         <template v-slot:prepend>
                           <q-icon

src/modules/04_registryPerson/interface/index/government.ts

@@ -13,8 +13,8 @@ interface FormMain {
   workDate: any;
   reasonSameDate: string;
   retireDate: any;
-  ageAll: GovAgeForm;
-  govAgeBkk: GovAgeForm;
+  ageAll: GovAgeForm | string;
+  govAgeBkk: GovAgeForm | string;
   absent: number;
   age: number;
   [key: string]: any;

src/modules/04_registryPerson/interface/index/leave.ts

@@ -8,6 +8,9 @@ interface DetailData {
   reason: string;
   typeLeaveId: string;
   code: string;
+  codeLeave:string
+  leaveSubTypeName:string
+  coupleDayLevelCountry:string
 }
 
 interface FormFilter {

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/interface/response/Edit.ts

@@ -70,6 +70,7 @@ interface DataPosition {
   status: string;
   posNumCodeSitAbb: string;
   posNumCodeSit: string;
+  positionExecutiveField: string;
 }
 
 export type { DataSalaryPos, DataPosition };

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

@@ -44,4 +44,21 @@ interface ResFileData {
   pathname: string;
 }
 
-export type { ResActingPosData, ResAssistanceData, ResFileData };
+interface ResAbsentLateData {
+  createdAt: string;
+  createdFullName: string;
+  createdUserId: string;
+  id: string;
+  isDeleted: boolean;
+  lastUpdateFullName: string;
+  lastUpdateUserId: string;
+  lastUpdatedAt: string;
+  profileId: string;
+  remark: string;
+  stampAmount: string;
+  stampDate: string;
+  stampType: string;
+  status: string;
+}
+
+export type { ResActingPosData, ResAssistanceData, ResFileData, ResAbsentLateData };

src/modules/04_registryPerson/store.ts

@@ -25,8 +25,7 @@ export const useRegistryNewDataStore = defineStore("registryNew", () => {
       {
         id: "posNo",
         name:
-          route.name === "registryNew" ||
-          route.name === "registryRetireOfficer"
+          route.name === "registryNew" || 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/stores/AbsentLate.ts

@@ -0,0 +1,19 @@
+import { ref } from "vue";
+import { defineStore } from "pinia";
+
+import type { DataOption } from "@/modules/04_registryPerson/interface/index/Main";
+
+export const useAbsentLateStore = defineStore("absentLate", () => {
+  const statusOps = ref<DataOption[]>([
+    { name: "ขาดราชการ", id: "ABSENT" },
+    { name: "มาสาย", id: "LATE" },
+  ]);
+
+  const stampTypeOps = ref<DataOption[]>([
+    { name: "เต็มวัน", id: "FULL_DAY" },
+    { name: "ครึ่งเช้า", id: "MORNING" },
+    { name: "ครึ่งบ่าย ", id: "AFTERNOON" },
+  ]);
+
+  return { statusOps, stampTypeOps };
+});

src/modules/04_registryPerson/utils/excelParser.ts

@@ -0,0 +1,177 @@
+import * as XLSX from "xlsx";
+
+export interface ExcelPreviewData {
+  fileName: string;
+  fileSize: number;
+  sheetNames: string[];
+  headers: string[];
+  rows: Array<Record<string, any>>;
+  totalRows: number;
+  previewRows: number;
+}
+
+export interface ParseOptions {
+  maxPreviewRows?: number;
+  sheetIndex?: number;
+}
+
+const DEFAULT_CONFIG = {
+  MAX_FILE_SIZE: 10 * 1024 * 1024, // 10MB
+  MAX_PREVIEW_ROWS: 0, // 0 = ไม่จำกัด แสดงทั้งหมด
+  ALLOWED_EXTENSIONS: [".xlsx", ".xls"],
+};
+
+function formatFileSize(bytes: number): string {
+  if (bytes === 0) return "0 Bytes";
+  const k = 1024;
+  const sizes = ["Bytes", "KB", "MB", "GB"];
+  const i = Math.floor(Math.log(bytes) / Math.log(k));
+  return Math.round((bytes / Math.pow(k, i)) * 100) / 100 + " " + sizes[i];
+}
+
+function getFileExtension(fileName: string): string {
+  return fileName.substring(fileName.lastIndexOf(".")).toLowerCase();
+}
+
+function validateFile(file: File): { message: string } | null {
+  const extension = getFileExtension(file.name);
+
+  if (!DEFAULT_CONFIG.ALLOWED_EXTENSIONS.includes(extension)) {
+    return {
+      message: `กรุณาเลือกไฟล์ Excel เท่านั้น (${DEFAULT_CONFIG.ALLOWED_EXTENSIONS.join(", ")})`,
+    };
+  }
+
+  if (file.size > DEFAULT_CONFIG.MAX_FILE_SIZE) {
+    const fileSizeMB = (file.size / (1024 * 1024)).toFixed(2);
+    const maxSizeMB = (DEFAULT_CONFIG.MAX_FILE_SIZE / (1024 * 1024)).toFixed(2);
+    return {
+      message: `ขนาดไฟล์เกิน ${maxSizeMB}MB (ไฟล์ของคุณ: ${fileSizeMB}MB)`,
+    };
+  }
+
+  return null;
+}
+
+export async function parseExcelFile(
+  file: File,
+  options: ParseOptions = {}
+): Promise<ExcelPreviewData> {
+  const maxPreviewRows = options.maxPreviewRows ?? DEFAULT_CONFIG.MAX_PREVIEW_ROWS;
+  const sheetIndex = options.sheetIndex ?? 0;
+
+  // Validate file
+  const validationError = validateFile(file);
+  if (validationError) {
+    throw new Error(validationError.message);
+  }
+
+  return new Promise((resolve, reject) => {
+    const reader = new FileReader();
+
+    reader.onload = (e) => {
+      try {
+        const data = e.target?.result;
+        if (!data) {
+          reject(new Error("ไม่สามารถอ่านไฟล์ได้"));
+          return;
+        }
+
+        const workbook = XLSX.read(data, { type: "binary" });
+
+        if (workbook.SheetNames.length === 0) {
+          reject(new Error("ไฟล์ไม่มีข้อมูล"));
+          return;
+        }
+
+        const sheetName = workbook.SheetNames[sheetIndex];
+        const worksheet = workbook.Sheets[sheetName];
+
+        // ใช้ sheet_to_json กับ raw: true เพื่ออ่าน raw values ก่อน
+        const jsonData = XLSX.utils.sheet_to_json(worksheet, {
+          header: 1,
+          defval: "",
+          raw: true, // อ่าน raw values
+        }) as any[][];
+
+        // หลังจากได้ raw data แล้ว ต้องไปอ่านค่าจาก formula ที่ cells โดยตรง
+        // เพราะบาง formula อาจจะยังไม่ถูกคำนวณ
+        const range = XLSX.utils.decode_range(worksheet["!ref"] || "A1");
+
+        // อ่านค่าจาก cells ที่มี formula (column สุดท้าย)
+        for (let row = range.s.r; row <= range.e.r; row++) {
+          for (let col = range.s.c; col <= range.e.c; col++) {
+            const cellAddress = XLSX.utils.encode_cell({ r: row, c: col });
+            const cell = worksheet[cellAddress];
+
+            // ถ้ามี formula ให้ใช้ผลลัพธ์ที่คำนวณแล้ว
+            if (cell && cell.f && !cell.v) {
+              // ลองใช้ cell.w (formatted value) ถ้ามี
+              if (cell.w) {
+                // แปลง array index ให้ถูกต้อง (row + 1 เพราะมี header row)
+                const arrayRowIndex = row - range.s.r;
+                if (jsonData[arrayRowIndex] && jsonData[arrayRowIndex][col] !== undefined) {
+                  jsonData[arrayRowIndex][col] = cell.w;
+                }
+              }
+            }
+          }
+        }
+
+        if (jsonData.length === 0) {
+          reject(new Error("ไฟล์ไม่มีข้อมูล"));
+          return;
+        }
+
+        // Extract headers from first row (ภาษาไทย)
+        const headers = jsonData[0].map((h: any) => String(h ?? ""));
+
+        // Extract data rows (skip header row)
+        const dataRows = jsonData.slice(1).filter((row) => row.some((cell) => cell !== ""));
+
+        if (dataRows.length === 0) {
+          reject(new Error("ไฟล์ไม่มีข้อมูล"));
+          return;
+        }
+
+        // Convert to array of objects - ใช้ header จาก Excel เป็น field names โดยตรง
+        // ถ้า maxPreviewRows = 0 จะแสดงทั้งหมด มิฉะนั้นจะแสดงตามจำนวนที่กำหนด
+        const rowsToProcess = maxPreviewRows === 0 ? dataRows : dataRows.slice(0, maxPreviewRows);
+        const rows = rowsToProcess.map((row, rowIndex) => {
+          const obj: Record<string, any> = {
+            id: `row_${rowIndex}`,
+          };
+
+          // ใช้ header เป็น field names โดยตรง
+          headers.forEach((header, index) => {
+            const cellValue = row[index] ?? "";
+            // ใช้ค่าจาก Excel โดยตรง ไม่แปลงค่า
+            obj[header] = cellValue;
+          });
+
+          return obj;
+        });
+
+        resolve({
+          fileName: file.name,
+          fileSize: file.size,
+          sheetNames: workbook.SheetNames,
+          headers,
+          rows,
+          totalRows: dataRows.length,
+          previewRows: rows.length,
+        });
+      } catch (error) {
+        reject(new Error("ไม่สามารถอ่านไฟล์ Excel ได้ กรุณาตรวจสอบไฟล์อีกครั้ง"));
+      }
+    };
+
+    reader.onerror = () => {
+      reject(new Error("ไม่สามารถอ่านไฟล์ได้"));
+    };
+
+    reader.readAsBinaryString(file);
+  });
+}
+
+export { formatFileSize };

src/modules/04_registryPerson/utils/exportPosition.ts

@@ -0,0 +1,157 @@
+import ExcelJS from "exceljs";
+import { useEditPosDataStore } from "@/modules/04_registryPerson/stores/Edit";
+
+import type { DataPosition } from "@/modules/04_registryPerson/interface/response/Edit";
+
+const store = useEditPosDataStore();
+
+// ฟังก์ชันแปลงวันที่จาก ISO format เป็นรูปแบบ dd/mm/yyyy (เช่น 18/05/2564)
+function formatDateToDDMMYYYY(dateString: string | null | Date): string {
+  if (!dateString) return "";
+
+  const date = new Date(dateString);
+  if (isNaN(date.getTime())) return "";
+
+  const day = String(date.getDate()).padStart(2, "0");
+  const month = String(date.getMonth() + 1).padStart(2, "0");
+  const year = date.getFullYear() + 543; // แปลงเป็นปีพุทธศักราช
+
+  return `${day}/${month}/${year}`;
+}
+
+export async function exportToExcelPosition(data: DataPosition[]) {
+  const workbook = new ExcelJS.Workbook();
+  const worksheet = workbook.addWorksheet("รายการประวัติตำแหน่งเงินเดือน");
+
+  // --- ส่วนที่ 1: สร้าง Master Data Sheet สำหรับอ้างอิง ID ---
+  // เราจะซ่อนแผ่นงานนี้ไว้ (hidden) เพื่อใช้ทำ Dropdown และ VLOOKUP
+  const masterSheet = workbook.addWorksheet("MasterData", { state: "hidden" });
+  const masterData = store.commandCodeData; // [{id: 1, name: "ย้าย"}, ...]
+
+  masterData.forEach((item, index) => {
+    masterSheet.getCell(`A${index + 1}`).value = item.name;
+    masterSheet.getCell(`B${index + 1}`).value = item.id;
+  });
+
+  // --- ส่วนที่ 2: กำหนด Columns ---
+  worksheet.columns = [
+    { header: "ลำดับ", key: "no", width: 8 },
+    { header: "วันที่คำสั่งมีผล", key: "commandDateAffect", width: 18 },
+    { header: "ตำแหน่งในสายงาน", key: "positionName", width: 25 },
+    { header: "ตำแหน่งประเภท", key: "positionType", width: 18 },
+    { header: "ระดับ", key: "positionLevel", width: 12 },
+    { header: "ระดับซี", key: "positionCee", width: 12 },
+    { header: "สายงาน", key: "positionLine", width: 20 },
+    { header: "ด้าน/สาขา", key: "positionPathSide", width: 15 },
+    { header: "ตำแหน่งทางการบริหาร", key: "positionExecutive", width: 20 },
+    { header: "ด้านทางการบริหาร", key: "positionExecutiveField", width: 20 },
+    { header: "เงินเดือน", key: "amount", width: 15 },
+    { header: "เงินค่าตอบแทนรายเดือน", key: "mouthSalaryAmount", width: 15 },
+    { header: "เงินประจำตำแหน่ง", key: "positionSalaryAmount", width: 15 },
+    { header: "เงินค่าตอบแทนพิเศษ", key: "amountSpecial", width: 15 },
+    { header: "หน่วยงาน", key: "organization", width: 30 },
+    { header: "ส่วนราชการระดับ 1", key: "orgChild1", width: 20 },
+    { header: "ส่วนราชการระดับ 2", key: "orgChild2", width: 20 },
+    { header: "ส่วนราชการระดับ 3", key: "orgChild3", width: 20 },
+    { header: "ส่วนราชการระดับ 4", key: "orgChild4", width: 20 },
+    { header: "ตัวย่อเลขที่ตำแหน่ง", key: "posNoAbb", width: 15 },
+    { header: "เลขที่ตำแหน่ง", key: "posNo", width: 15 },
+    { header: "หน่วยงานที่ออกคำสั่ง", key: "posNumCodeSit", width: 20 },
+    {
+      header: "ตัวย่อหน่วยงานที่ออกคำสั่ง",
+      key: "posNumCodeSitAbb",
+      width: 15,
+    },
+    { header: "เลขที่คำสั่ง", key: "commandNo", width: 15 },
+    { header: "ปีเลขที่คำสั่ง", key: "commandYear", width: 12 },
+    { header: "วันที่ลงนาม", key: "commandDateSign", width: 18 },
+    { header: "ประเภทคำสั่ง", key: "commandCodeName", width: 25 }, // AA
+    { header: "หมายเหตุ", key: "remark", width: 20 },
+    { header: "commandId", key: "commandId", width: 20 }, // AC (ลำดับที่ 29)
+    { header: "commandCode", key: "commandCode", width: 20 }, // AD (ลำดับที่ 30)
+  ];
+
+  // 3. Map ข้อมูล
+  const newData = data.map((e, index) => ({
+    no: index + 1,
+    commandDateAffect: e.commandDateAffect
+      ? formatDateToDDMMYYYY(e.commandDateAffect)
+      : "",
+    positionName: e.positionName,
+    positionType: e.positionType,
+    positionLevel: e.positionLevel,
+    positionCee: e.positionCee,
+    positionLine: e.positionLine || "",
+    positionPathSide: e.positionPathSide || "",
+    positionExecutive: e.positionExecutive,
+    positionExecutiveField: e.positionExecutiveField || "",
+    amount: e.amount || 0,
+    mouthSalaryAmount: e.mouthSalaryAmount || 0,
+    positionSalaryAmount: e.positionSalaryAmount || 0,
+    amountSpecial: e.amountSpecial || 0,
+    organization: e.orgRoot,
+    orgChild1: e.orgChild1,
+    orgChild2: e.orgChild2,
+    orgChild3: e.orgChild3,
+    orgChild4: e.orgChild4,
+    posNoAbb: e.posNoAbb,
+    posNo: e.posNo,
+    posNumCodeSit: e.posNumCodeSit,
+    posNumCodeSitAbb: e.posNumCodeSitAbb,
+    commandNo: e.commandNo,
+    commandYear: e.commandYear ? Number(e.commandYear) + 543 : "",
+    commandDateSign: e.commandDateSign
+      ? formatDateToDDMMYYYY(e.commandDateSign)
+      : "",
+    commandCodeName: store.convertCommandCodeName(e.commandCode),
+    remark: e.remark,
+    commandId: e.commandId || "",
+    commandCode: e.commandCode || "", // ใส่ค่าเริ่มต้นไว้
+  }));
+
+  worksheet.addRows(newData);
+
+  // 4. ตกแต่งสี, Dropdown และ สูตร VLOOKUP
+  newData.forEach((_, index) => {
+    const rowIndex = index + 2;
+
+    // --- ตั้งค่า Format สำหรับเซลล์วันที่ ---
+    // เซลล์ B (commandDateAffect) และ Z (commandDateSign)
+    const dateAffectCell = worksheet.getCell(`B${rowIndex}`);
+    const dateSignCell = worksheet.getCell(`Z${rowIndex}`);
+
+    [dateAffectCell, dateSignCell].forEach((cell) => {
+      cell.numFmt = "dd/mm/yyyy";
+    });
+
+    // --- ทำ Dropdown คอลัมน์ AA ---
+    // อ้างอิงรายการจาก MasterData Sheet จะทำให้ Excel ทำงานได้เสถียรกว่า (กรณีรายการเยอะ)
+    worksheet.getCell(`AA${rowIndex}`).dataValidation = {
+      type: "list",
+      allowBlank: true,
+      formulae: [`MasterData!$A$1:$A$${masterData.length}`],
+    };
+
+    // --- ผูกสูตรให้ commandCode (AD) เปลี่ยนตามการเลือกใน AA ---
+    // AA คือประเภทคำสั่ง, AD คือ commandCode
+    worksheet.getCell(`AD${rowIndex}`).value = {
+      formula: `=IFERROR(VLOOKUP(AA${rowIndex}, MasterData!$A$1:$B$${masterData.length}, 2, FALSE), "")`,
+    };
+  });
+
+  // 5. สไตล์ Header
+  worksheet.getRow(1).font = { bold: true };
+  worksheet.getRow(1).alignment = { vertical: "middle", horizontal: "center" };
+
+  // 6. เขียนไฟล์
+  const buffer = await workbook.xlsx.writeBuffer();
+  const blob = new Blob([buffer], {
+    type: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet",
+  });
+  const url = window.URL.createObjectURL(blob);
+  const a = document.createElement("a");
+  a.href = url;
+  a.download = "รายการประวัติตำแหน่งเงินเดือน.xlsx";
+  a.click();
+  window.URL.revokeObjectURL(url);
+}

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) {
-  await http
+function fetchProfile(id: string) {
+  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;
       }
@@ -806,9 +807,13 @@ function handleBackNavigation() {
     router.go(-1);
   } else {
     if (empType.value === "") {
-      router.push("/registry-officer");
+      storeRegistry.isLeave
+        ? router.push("/registry-retire-officer")
+        : router.push("/registry-officer");
     } else if (empType.value === "-employee") {
-      router.push("/registry-employee");
+      storeRegistry.isLeave
+        ? router.push("/registry-retire-employee")
+        : router.push("/registry-employee");
     }
   }
 }
@@ -853,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/DialogExcelPreview.vue

@@ -0,0 +1,270 @@
+<script setup lang="ts">
+import { ref, computed, watch } from "vue";
+import { useQuasar } from "quasar";
+import moment from "moment";
+
+import {
+  parseExcelFile,
+  formatFileSize,
+} from "@/modules/04_registryPerson/utils/excelParser";
+import { useCounterMixin } from "@/stores/mixin";
+
+const $q = useQuasar();
+const { dialogConfirm } = useCounterMixin();
+
+interface Props {
+  modal: boolean;
+  file: File | null;
+}
+
+interface Emits {
+  (e: "update:modal", value: boolean): void;
+  (e: "confirm", file: File): void;
+  (e: "cancel"): void;
+}
+
+const props = defineProps<Props>();
+const emit = defineEmits<Emits>();
+
+const isLoading = ref(false);
+const isUploading = ref(false);
+const previewData = ref<Record<string, any>[]>([]);
+const excelHeaders = ref<string[]>([]); // Headers จาก Excel
+
+const fileName = computed(() => props.file?.name ?? "");
+const fileSize = computed(() => props.file?.size ?? 0);
+const totalRows = computed(() => previewData.value.length);
+const previewRows = computed(() => previewData.value.length);
+
+const pagination = ref({
+  page: 1,
+  rowsPerPage: 50,
+});
+
+// ฟังก์ชันแปลงวันที่เป็นภาษาไทย (ไม่บวก 543 เพราะ Excel เป็น พ.ศ. อยู่แล้ว)
+function formatDateForDisplay(value: any): string {
+  if (!value) return "-";
+
+  // ถ้าเป็น string format dd/mm/yyyy (จาก Excel ที่เป็น พ.ศ.)
+  if (typeof value === "string") {
+    const parts = value.split("/");
+    if (parts.length === 3) {
+      const day = parts[0];
+      const monthNum = parseInt(parts[1], 10);
+      const year = parts[2];
+
+      // แปลงเลขเดือนเป็นชื่อเดือนภาษาไทย
+      const thaiMonths = [
+        "ม.ค.",
+        "ก.พ.",
+        "มี.ค.",
+        "เม.ย.",
+        "พ.ค.",
+        "มิ.ย.",
+        "ก.ค.",
+        "ส.ค.",
+        "ก.ย.",
+        "ต.ค.",
+        "พ.ย.",
+        "ธ.ค.",
+      ];
+      const thaiMonth = thaiMonths[monthNum - 1] || parts[1];
+
+      return `${day} ${thaiMonth} ${year}`;
+    }
+    return value;
+  }
+
+  // ถ้าเป็น Date object ให้แปลงโดยไม่บวก 543 (เพราะ Excel serial date แปลงเป็น ค.ศ. แล้วแต่เดิมเป็น พ.ศ.)
+  const dateMoment = moment(value);
+  const day = dateMoment.format("DD");
+  const month = dateMoment.format("MMM");
+  const year = +dateMoment.format("YYYY"); // ไม่บวก 543
+  return `${day} ${month} ${year}`;
+}
+
+// Headers ที่เป็นวันที่
+const DATE_HEADERS = ["วันที่คำสั่งมีผล", "วันที่ลงนาม"];
+const SALARY_HEADERS = [
+  "เงินเดือน",
+  "ค่าจ้าง",
+  "เงินค่าตอบแทนรายเดือน",
+  "เงินประจำตำแหน่ง",
+  "เงินค่าตอบแทนพิเศษ",
+];
+
+// สร้าง columns จาก Excel headers
+const tableColumns = computed(() => {
+  if (excelHeaders.value.length === 0) return [];
+  return excelHeaders.value.map((header, index) => {
+    const isDateColumn = DATE_HEADERS.includes(header);
+    const isSalaryColumn = SALARY_HEADERS.includes(header);
+
+    return {
+      name: `col_${index}`,
+      label: header,
+      field: header,
+      align: "left" as const,
+      sortable: false,
+      style: "white-space: nowrap;",
+      headerStyle: "font-size: 13px; font-weight: bold;",
+      format: (val: any) => {
+        // ถ้าค่าว่าง แสดง -
+        if (val == null || val === "") return "-";
+
+        // ถ้าเป็น column วันที่
+        if (isDateColumn) {
+          // ถ้าเป็น string วันที่ format dd/mm/yyyy (จาก Excel)
+          if (
+            typeof val === "string" &&
+            val.match(/^\d{1,2}\/\d{1,2}\/\d{4}$/)
+          ) {
+            return formatDateForDisplay(val);
+          }
+          // ถ้าเป็น number (Excel serial date) ให้แปลงเป็น Date object ก่อน
+          if (typeof val === "number") {
+            return formatDateForDisplay((val - 25569) * 86400 * 1000);
+          }
+        }
+
+        // ถ้าเป็น column เงินให้ format มี comma separator (ตรวจสอบชื่อ label)
+        if (isSalaryColumn) {
+          const numericValue = Number(val);
+          if (typeof numericValue === "number" && !isNaN(numericValue)) {
+            return numericValue.toLocaleString("en-US");
+          }
+        }
+
+        return val;
+      },
+    };
+  });
+});
+
+async function loadPreview() {
+  if (!props.file) return;
+
+  isLoading.value = true;
+  try {
+    const result = await parseExcelFile(props.file, {
+      maxPreviewRows: 0, // 0 = แสดงทั้งหมด
+      sheetIndex: 0, // ใช้ sheet แรกเสมอ
+    });
+    previewData.value = result.rows;
+    excelHeaders.value = result.headers; // เก็บ headers จาก Excel
+  } catch (error) {
+    console.error("Error parsing Excel file:", error);
+    previewData.value = [];
+    excelHeaders.value = [];
+  } finally {
+    isLoading.value = false;
+  }
+}
+
+function onConfirm() {
+  dialogConfirm($q, () => {
+    if (props.file) {
+      isUploading.value = true;
+      emit("confirm", props.file);
+    }
+  });
+}
+
+function onClose() {
+  emit("cancel");
+  emit("update:modal", false);
+}
+
+function onModalUpdate(value: boolean) {
+  emit("update:modal", value);
+}
+
+watch(
+  () => props.modal,
+  (newValue) => {
+    if (newValue && props.file) {
+      isUploading.value = false;
+      loadPreview();
+    }
+  }
+);
+</script>
+
+<template>
+  <q-dialog :model-value="modal" @update:model-value="onModalUpdate" persistent>
+    <q-card style="min-width: 80vw; max-width: 95vw">
+      <q-card-section class="row items-center q-pb-none">
+        <div class="text-h6">ตัวอย่างข้อมูลไฟล์ Excel</div>
+        <q-space />
+        <q-btn icon="close" flat round dense v-close-popup @click="onClose" />
+      </q-card-section>
+
+      <q-separator />
+
+      <!-- File Info Section -->
+      <q-card-section>
+        <div class="row q-col-gutter-md">
+          <div class="col-12">
+            <div class="text-subtitle2 text-grey-7">ข้อมูลไฟล์</div>
+          </div>
+          <div class="col-md-4 col-sm-6 col-12">
+            <div class="flex items-center">
+              <q-icon
+                name="insert_drive_file"
+                class="q-mr-sm"
+                color="primary"
+              />
+              <span class="text-body2">ชื่อไฟล์: {{ fileName }}</span>
+            </div>
+          </div>
+          <div class="col-md-4 col-sm-6 col-12">
+            <div class="flex items-center">
+              <q-icon name="folder" class="q-mr-sm" color="primary" />
+              <span class="text-body2"
+                >ขนาด: {{ formatFileSize(fileSize) }}</span
+              >
+            </div>
+          </div>
+          <div class="col-md-4 col-sm-12 col-12">
+            <div class="flex items-center">
+              <q-icon name="table_chart" class="q-mr-sm" color="primary" />
+              <span class="text-body2">จำนวนแถว: {{ totalRows }} แถว</span>
+            </div>
+          </div>
+        </div>
+      </q-card-section>
+
+      <q-separator />
+
+      <!-- Preview Table -->
+      <q-card-section style="max-height: 70vh" class="scroll">
+        <div class="text-subtitle2 q-mb-md">
+          รายการตำแหน่ง ({{ previewRows }} รายการ)
+        </div>
+        <d-table
+          :columns="tableColumns"
+          :rows="previewData"
+          :paging="true"
+          :rows-per-page-options="[20, 50, 100, 0]"
+          v-model:pagination="pagination"
+          :loading="isLoading"
+          row-key="id"
+          flat
+          bordered
+          dense
+        />
+      </q-card-section>
+
+      <!-- Actions -->
+      <q-card-actions align="right" class="q-pa-md">
+        <q-btn
+          type="submit"
+          color="public"
+          label="ยืนยันการอัปโหลด"
+          @click="onConfirm"
+          :loading="isUploading"
+        />
+      </q-card-actions>
+    </q-card>
+  </q-dialog>
+</template>

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

@@ -295,7 +295,7 @@ async function onDefineData(index: number) {
 
   if (newData) {
     const salaryNew = newData.salaryNew;
-    const salaryOld = newData.salaryOld;
+    const salaryOld = newData?.salaryOld;
 
     formData.commandCode = salaryNew.commandCode;
     formData.commandNo = salaryNew.commandNo;
@@ -325,32 +325,34 @@ async function onDefineData(index: number) {
     formData.posNumCodeSit = salaryNew.posNumCodeSit;
     formData.posNumCodeSitAbb = salaryNew.posNumCodeSitAbb;
 
-    formReadonly.commandCode = salaryOld.commandCode;
-    formReadonly.commandNo = salaryOld.commandNo;
-    formReadonly.commandYear = salaryOld.commandYear;
-    formReadonly.commandDateAffect = salaryOld.commandDateAffect;
-    formReadonly.commandDateSign = salaryOld.commandDateSign;
-    formReadonly.posNoAbb = salaryOld.posNoAbb;
-    formReadonly.posNo = salaryOld.posNo;
-    formReadonly.positionName = salaryOld.positionName;
-    formReadonly.positionType = salaryOld.positionType;
-    formReadonly.positionLevel = salaryOld.positionLevel;
-    formReadonly.positionCee = salaryOld.positionCee;
-    formReadonly.positionLine = salaryOld.positionLine;
-    formReadonly.positionPathSide = salaryOld.positionPathSide;
-    formReadonly.positionExecutive = salaryOld.positionExecutive;
-    formReadonly.positionExecutiveField = salaryOld.positionExecutiveField;
-    formReadonly.amount = salaryOld.amount;
-    formReadonly.positionSalaryAmount = salaryOld.positionSalaryAmount;
-    formReadonly.mouthSalaryAmount = salaryOld.mouthSalaryAmount;
-    formReadonly.orgRoot = salaryOld.orgRoot;
-    formReadonly.orgChild1 = salaryOld.orgChild1;
-    formReadonly.orgChild2 = salaryOld.orgChild2;
-    formReadonly.orgChild3 = salaryOld.orgChild3;
-    formReadonly.orgChild4 = salaryOld.orgChild4;
-    formReadonly.remark = salaryOld.remark;
-    formReadonly.posNumCodeSit = salaryOld.posNumCodeSit;
-    formReadonly.posNumCodeSitAbb = salaryOld.posNumCodeSitAbb;
+    if (salaryOld) {
+      formReadonly.commandCode = salaryOld.commandCode;
+      formReadonly.commandNo = salaryOld.commandNo;
+      formReadonly.commandYear = salaryOld.commandYear;
+      formReadonly.commandDateAffect = salaryOld.commandDateAffect;
+      formReadonly.commandDateSign = salaryOld.commandDateSign;
+      formReadonly.posNoAbb = salaryOld.posNoAbb;
+      formReadonly.posNo = salaryOld.posNo;
+      formReadonly.positionName = salaryOld.positionName;
+      formReadonly.positionType = salaryOld.positionType;
+      formReadonly.positionLevel = salaryOld.positionLevel;
+      formReadonly.positionCee = salaryOld.positionCee;
+      formReadonly.positionLine = salaryOld.positionLine;
+      formReadonly.positionPathSide = salaryOld.positionPathSide;
+      formReadonly.positionExecutive = salaryOld.positionExecutive;
+      formReadonly.positionExecutiveField = salaryOld.positionExecutiveField;
+      formReadonly.amount = salaryOld.amount;
+      formReadonly.positionSalaryAmount = salaryOld.positionSalaryAmount;
+      formReadonly.mouthSalaryAmount = salaryOld.mouthSalaryAmount;
+      formReadonly.orgRoot = salaryOld.orgRoot;
+      formReadonly.orgChild1 = salaryOld.orgChild1;
+      formReadonly.orgChild2 = salaryOld.orgChild2;
+      formReadonly.orgChild3 = salaryOld.orgChild3;
+      formReadonly.orgChild4 = salaryOld.orgChild4;
+      formReadonly.remark = salaryOld.remark;
+      formReadonly.posNumCodeSit = salaryOld.posNumCodeSit;
+      formReadonly.posNumCodeSitAbb = salaryOld.posNumCodeSitAbb;
+    }
   }
 }
 

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

@@ -33,9 +33,9 @@ const posExecutiveOptions = defineModel<DataOption[]>("posExecutiveOptions", {
   required: true,
 });
 
-const props = defineProps({
-  updateSelectType: { type: Function, defult: () => {} },
-});
+const props = defineProps<{
+  updateSelectType?: (value: any) => void;
+}>();
 
 /**
  * ฟิลเตอร์ข้อมูลจาก input
@@ -364,6 +364,8 @@ function classInput(val: boolean) {
         :label="empType === 'officer' ? 'ตำแหน่งในสายงาน' : 'ตำแหน่ง'"
         :rules="isAddPosition ? [(val: string) => !!val || `${empType === 'officer' ? 'ตำแหน่งในสายงาน' : 'ตำแหน่ง'}` ] :[]"
         hide-bottom-space
+        autocomplete="on"
+        name="positionName"
       />
     </div>
 
@@ -388,6 +390,7 @@ function classInput(val: boolean) {
         hide-selected
         fill-input
         clearable
+        @clear="formData.positionLevel = ''"
         input-debounce="0"
         @update:model-value="props.updateSelectType"
         @filter="(inputValue: string,
@@ -461,6 +464,8 @@ function classInput(val: boolean) {
         v-model="formData.positionLine"
         hide-bottom-space
         :label="`${'สายงาน'}`"
+        autocomplete="on"
+        name="positionLine"
       />
       <!-- <q-select
         outlined
@@ -505,6 +510,8 @@ function classInput(val: boolean) {
         v-model="formData.positionPathSide"
         hide-bottom-space
         :label="`${'ด้าน/สาขา'}`"
+        autocomplete="on"
+        name="positionPathSide"
       />
       <!-- <q-select
         :class="classInput(isReadonly)"
@@ -549,6 +556,8 @@ function classInput(val: boolean) {
         v-model="formData.positionExecutive"
         hide-bottom-space
         :label="`${'ตำแหน่งทางการบริหาร'}`"
+        autocomplete="on"
+        name="positionExecutive"
       />
       <!-- <q-select
         :class="classInput(isReadonly)"
@@ -593,6 +602,8 @@ function classInput(val: boolean) {
         v-model="formData.positionExecutiveField"
         hide-bottom-space
         :label="`${'ด้านทางการบริหาร'}`"
+        autocomplete="on"
+        name="positionExecutiveField"
       />
     </div>
 
@@ -693,6 +704,8 @@ function classInput(val: boolean) {
             borderless
             v-model="formData.orgRoot"
             hide-bottom-space
+            autocomplete="on"
+            name="organization"
             :label="`${'หน่วยงาน'}`"
           />
         </div>
@@ -708,6 +721,8 @@ function classInput(val: boolean) {
             v-model="formData.orgChild1"
             hide-bottom-space
             :label="`${'ส่วนราชการระดับ 1'}`"
+            autocomplete="on"
+            name="organization"
           />
         </div>
 
@@ -722,6 +737,8 @@ function classInput(val: boolean) {
             v-model="formData.orgChild2"
             hide-bottom-space
             :label="`${'ส่วนราชการระดับ 2'}`"
+            autocomplete="on"
+            name="organization"
           />
         </div>
 
@@ -736,6 +753,8 @@ function classInput(val: boolean) {
             v-model="formData.orgChild3"
             hide-bottom-space
             :label="`${'ส่วนราชการระดับ 3'}`"
+            autocomplete="on"
+            name="organization"
           />
         </div>
 
@@ -750,6 +769,8 @@ function classInput(val: boolean) {
             v-model="formData.orgChild4"
             hide-bottom-space
             :label="`${'ส่วนราชการระดับ 4'}`"
+            autocomplete="on"
+            name="organization"
           />
         </div>
       </div>

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

@@ -1,13 +1,13 @@
 <script setup lang="ts">
 import { ref, onMounted, computed, reactive } from "vue";
 import { useQuasar } from "quasar";
-import * as XLSX from "xlsx";
 
 import http from "@/plugins/http";
 import config from "@/app.config";
 import { useRoute } from "vue-router";
 import { useCounterMixin } from "@/stores/mixin";
 import { useEditPosDataStore } from "@/modules/04_registryPerson/stores/Edit";
+import { exportToExcelPosition } from "@/modules/04_registryPerson/utils/exportPosition";
 
 import type { QTableColumn } from "quasar";
 import type { FormDataSalary } from "@/modules/04_registryPerson/interface/index/Edit";
@@ -20,6 +20,7 @@ import type {
 
 import DialogForm from "@/modules/04_registryPerson/views/edit/components/DialogForm.vue";
 import DialogSort from "@/modules/04_registryPerson/views/edit/components/DialogSort.vue";
+import DialogExcelPreview from "@/modules/04_registryPerson/views/edit/components/DialogExcelPreview.vue";
 import CurruncyInput from "@/components/CurruncyInput.vue";
 
 const $q = useQuasar();
@@ -52,6 +53,11 @@ const amountRef = ref<any>(null);
 const amountSpecialRef = ref<any>(null);
 const currencyPopupRef = ref<any>(null);
 
+// Excel Preview
+const excelPreviewModal = ref<boolean>(false);
+const selectedExcelFile = ref<File | null>(null);
+const isParsingExcel = ref<boolean>(false);
+
 //Table
 const isLoad = ref<boolean>(true);
 const rowIndex = ref<number>(0);
@@ -307,8 +313,6 @@ const isAddPosition = ref<boolean>(true); // สถานะการเพิ
 /** function fetch ข้อมูลรายการตำแหน่งเงินเดือน*/
 async function fetchData() {
   isLoad.value = true;
-  rowsMain.value = [];
-  rows.value = [];
   const paht =
     tabs.value === "PENDING"
       ? `/${empType.value}/${profileId.value}`
@@ -432,66 +436,7 @@ function classColorRow(isDelete: boolean, isEdit: boolean, isEntry: boolean) {
 
 /** ฟังก์ชันดาวน์โหลดไฟล Excel */
 function exportToExcel() {
-  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");
+  exportToExcelPosition(rows.value);
 }
 
 const commandCodeOptions = ref<DataOption[]>(store.commandCodeData); //รายการปรเภทคำสั่ง
@@ -849,6 +794,106 @@ async function validateAndSave(
   }
 }
 
+/**
+ * ฟังก์ชันอัปโหลดไฟล์ Excel
+ * เปิด preview modal ก่อนอัปโหลด
+ */
+function handUploadFile() {
+  const input = document.createElement("input");
+  input.type = "file";
+  input.accept = ".xlsx,.xls";
+
+  input.onchange = async (e: Event) => {
+    const file = (e.target as HTMLInputElement).files?.[0];
+    if (!file) return;
+
+    // ตรวจสอบชนิดไฟล์โดยตรวจสอบนามสกุล
+    const validExtensions = [".xlsx", ".xls"];
+    const fileExtension = file.name
+      .substring(file.name.lastIndexOf("."))
+      .toLowerCase();
+
+    if (!validExtensions.includes(fileExtension)) {
+      messageError($q, {
+        response: {
+          data: {
+            title: "กรุณาเลือกไฟล์ Excel เท่านั้น (.xlsx, .xls)",
+          },
+        },
+      });
+      return;
+    }
+
+    // เก็บไฟล์และเปิด preview modal
+    selectedExcelFile.value = file;
+    excelPreviewModal.value = true;
+  };
+
+  input.click();
+}
+
+/**
+ * ฟังก์ชันยืนยันการอัปโหลดไฟล์
+ * ส่งไฟล์ไปยัง API เมื่อ user ยืนยันจาก preview modal
+ */
+async function onConfirmUpload(file: File) {
+  try {
+    isParsingExcel.value = true;
+    showLoader();
+
+    const type = empType.value === "officer" ? "office" : "employee";
+    const formData = new FormData();
+    formData.append("file", file);
+
+    await http.post(config.API.uploadProfile(type, profileId.value), formData, {
+      headers: {
+        "Content-Type": "multipart/form-data",
+      },
+    });
+
+    success($q, "อัปโหลดไฟล์สำเร็จ");
+    await fetchData();
+    excelPreviewModal.value = false;
+  } catch (error) {
+    messageError($q, error);
+  } finally {
+    hideLoader();
+    isParsingExcel.value = false;
+  }
+}
+
+/**
+ * ฟังก์ชันยกเลิกการอัปโหลด
+ * ปิด preview modal และล้างค่า
+ */
+function onCancelUpload() {
+  selectedExcelFile.value = null;
+  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()]);
 });
@@ -884,10 +929,39 @@ 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
+            v-if="
+              tabs === 'PENDING' &&
+              statusCheckEdit == 'PENDING' &&
+              isConfirmEdit
+            "
+            flat
+            round
+            color="blue"
+            icon="upload"
+            @click="handUploadFile()"
+          >
+            <q-tooltip>อัปโหลดไฟล์แก้ไข</q-tooltip>
+          </q-btn>
           <q-btn
             flat
             round
@@ -895,7 +969,9 @@ onMounted(async () => {
             icon="download"
             :disable="rows.length == 0"
             @click="exportToExcel()"
-          />
+          >
+            <q-tooltip>ดาวน์โหลดไฟล์</q-tooltip>
+          </q-btn>
         </div>
 
         <q-input
@@ -1726,6 +1802,13 @@ onMounted(async () => {
     :fetch-data="fetchData"
     :columns="columns"
   />
+
+  <DialogExcelPreview
+    v-model:modal="excelPreviewModal"
+    :file="selectedExcelFile"
+    @confirm="onConfirmUpload"
+    @cancel="onCancelUpload"
+  />
 </template>
 
 <style scoped></style>

src/modules/05_placement/components/AppointEmployee/AppointEmployeeDetail.vue

@@ -54,6 +54,7 @@ const reason = ref<string>(""); //หมายเหตุ
 const status = ref<string>("");
 const fullName = ref<string>("");
 const mianData = ref<MainData>();
+const typeCommand = ref<string>(""); //ประเภทคำสั่ง
 
 /** fetch รายละเอียดการปรับระดับชั้นงานลูกจ้าง*/
 async function fecthappointmentByid() {
@@ -79,6 +80,7 @@ async function fecthappointmentByid() {
       salary.value = data.salary ?? 0;
       reason.value = data.reason;
       date.value = data.positionDate;
+      typeCommand.value = data.typeCommand;
     })
     .catch((e) => {
       messageError($q, e);
@@ -323,7 +325,10 @@ onMounted(async () => {
             </div>
 
             <div class="col-12"><q-separator /></div>
-            <div class="col-xs-6 col-sm-6 row items-center">
+            <div
+              class="col-xs-6 col-sm-6 row items-center"
+              v-if="typeCommand !== 'MOVE'"
+            >
               <div class="col-12">
                 <datepicker
                   :readonly="!edit"

src/modules/05_placement/components/AppointMent/AppointMentDetail.vue

@@ -45,6 +45,7 @@ const date = ref<Date | null>(null); //ดำรงตำแหน่งใน
 const reason = ref<string>(""); //หมายเหตุ
 const status = ref<string>("");
 const fullName = ref<string>("");
+const typeCommand = ref<string>(""); //ประเภทคำสั่ง
 
 /** fetch รายละเอียดการแต่งตั้ง-เลื่อน-ย้าย*/
 async function fecthappointmentByid() {
@@ -61,6 +62,7 @@ async function fecthappointmentByid() {
       }`;
 
       status.value = data.status;
+      typeCommand.value = data.typeCommand;
       educationOld.value = data.educationOld ?? "-";
       organizationPositionOld.value = data.organizationPositionOld;
       positionTypeOld.value = data.positionTypeOld;
@@ -313,7 +315,10 @@ onMounted(() => {
             </div>
 
             <div class="col-12"><q-separator /></div>
-            <div class="col-xs-6 col-sm-6 row items-center">
+            <div
+              class="col-xs-6 col-sm-6 row items-center"
+              v-if="typeCommand !== 'MOVE'"
+            >
               <div class="col-12">
                 <datepicker
                   :readonly="!edit"

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/PersonalDetail/Information/Qualification.vue

@@ -53,6 +53,7 @@ const saveData = async () => {
         changeBtn();
         onEdit.value = false;
         edit.value = false;
+        emit("update:statusEdit", false);
       })
       .catch((e: any) => {
         messageError($q, e);

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

@@ -1,7 +1,7 @@
 <!-- ส่วนหัวของ ข้อมูลส่วนตัว และ ที่อยู่ -->
 <script setup lang="ts">
 import { checkPermission } from "@/utils/permissions";
-import { ref } from "vue";
+import { computed } from "vue";
 import { useRoute } from "vue-router";
 
 const route = useRoute();
@@ -62,9 +62,9 @@ const props = defineProps({
 });
 
 const emit = defineEmits(["update:edit"]);
-const isEdit = ref<boolean>(
-  checkPermission(route)?.attrIsUpdate ? true : false
-);
+const isEdit = computed(() => {
+  return checkPermission(route)?.attrIsUpdate ? true : false;
+});
 
 const updateEdit = (value: any) => {
   emit("update:edit", value);

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

@@ -2,7 +2,7 @@
 import { ref, onMounted, watch } from "vue";
 
 /** importType*/
-import type { QTableProps } from "quasar";
+import { type QTableProps } from "quasar";
 import type {
   Positions,
   FormPosType,
@@ -22,14 +22,14 @@ const store = useSelectOrgStore();
 /** props*/
 const selected = defineModel("selectedPos", { required: true }); //ตำแหน่งที่เลือก
 const positionId = defineModel<string>("positionId", { required: true }); //id ตำแหน่งที่เลือก
-const seletcId = defineModel<string>("seletcId", { required: true }); // ตำแหน่งที่เลือก
-const date = defineModel<Date>("datePos", { required: true }); //วันยที่รายงานคัว
+const selectId = defineModel<string>("selectId", { required: true }); // ตำแหน่งที่เลือก
+const date = defineModel<Date | null>("datePos", { required: true }); //วันยที่รายงานคัว
 const positionData = defineModel<any[]>("position", { required: true }); //ข้อมูลรายการเลขที่ตำแหน่ง
 const isAll = defineModel<boolean>("isAll", { required: true }); //แสดงตำแหน่งทั้งหมด
 const isBlank = defineModel<boolean>("isBlank", { required: true }); //แสดงเฉพาะตำแหน่งว่าง
 const isPosition = defineModel<string>("isPosition", { required: true });
 // const isPositionOld = defineModel<boolean>("isPositionOld", { required: true }); //แสดงตำแหน่งที่ตรงกับประเภทและระดับเดิม
-const posType = defineModel<FormPosType>("posType", { required: true }); //ตำแหน่งประเภท
+const posType = defineModel<FormPosType | null>("posType", { required: true }); //ตำแหน่งประเภท
 const posLevel = defineModel<string>("posLevel", { required: true }); //ระดับตำแหน่ง
 const optionPosType = defineModel<FormPosType[]>("optionPosType", {
   required: true,
@@ -47,6 +47,7 @@ const props = defineProps({
   onPosType: Function,
   nodeId: String,
   nodeLevel: Number,
+  isLoadPosition: Boolean,
 });
 
 //Table
@@ -213,9 +214,9 @@ async function onClickSelectPos(id: string) {
   // หาตำแหน่ง
   if (position) {
     rowsPosition.value = position.positions;
-    if (seletcId.value) {
+    if (selectId.value) {
       selected.value = rowsPosition.value.filter(
-        (e) => e.id === seletcId.value
+        (e) => e.id === selectId.value
       );
     }
   }
@@ -248,15 +249,20 @@ watch(positionData, (newVal, oldVal) => {
   }
 });
 
+watch(
+  () => props.isLoadPosition,
+  (newVal) => {
+    if (newVal && positionId.value) {
+      onClickSelectPos(positionId.value);
+    }
+  }
+);
+
 /**
  * ทำงานเมื่อ Components ถูกเรียกใช้งาน
  */
 onMounted(async () => {
-  if (positionId.value) {
-    setTimeout(async () => {
-      await onClickSelectPos(positionId.value);
-    }, 1000);
-  } else {
+  if (!positionId.value) {
     positionRows.value = positionData.value;
     positionRowsData.value = positionData.value;
   }

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

@@ -3,6 +3,7 @@ import { ref, watch } from "vue";
 import { useQuasar } from "quasar";
 
 import { useCounterMixin } from "@/stores/mixin";
+import { calculateAge } from "@/utils/function";
 import http from "@/plugins/http";
 import config from "@/app.config";
 
@@ -38,6 +39,20 @@ const props = defineProps({
 
 const rows = ref<DataEducation[]>([]);
 const personalForm = ref<DataPerson>();
+const age = ref<string | null>(""); //อายุ
+
+// ข้อมูลแปลงจาก ID เป็นชื่อ
+const currentProvinceName = ref<string>("");
+const currentDistrictName = ref<string>("");
+const currentSubDistrictName = ref<string>("");
+const registProvinceName = ref<string>("");
+const registDistrictName = ref<string>("");
+const registSubDistrictName = ref<string>("");
+
+// Cache ข้อมูล
+const provincesCache = ref<any[]>([]);
+const districtsCache = ref<Map<string, any[]>>(new Map()); // key: provinceId, value: districts[]
+const subDistrictsCache = ref<Map<string, any[]>>(new Map()); // key: districtId, value: subDistricts[]
 
 /**หัวตาราง */
 const columns = ref<QTableProps["columns"]>([
@@ -87,11 +102,20 @@ const columns = ref<QTableProps["columns"]>([
  * ฟังก์ชันดึงข้อมูลรายละเอียด
  */
 async function fetchData() {
+  // Reset ข้อมูลเก่าก่อนโหลดข้อมูลใหม่
+  resetData();
+  
   showLoader();
   await http
     .get(config.API.getDatapersonal(props.personalId))
     .then((res) => {
       personalForm.value = res.data.result;
+      if (res.data.result.dateOfBirth) {
+        // กำหนดอายุ ส่งวันเกิดไปคำนวน
+        age.value = calculateAge(res.data.result.dateOfBirth);
+      } else {
+        age.value = null;
+      }
       personalForm.value?.education.map((e: Education) => {
         rows.value.push({
           university: e.institute,
@@ -107,6 +131,159 @@ async function fetchData() {
     .finally(() => {
       hideLoader();
     });
+
+  // แปลง ID เป็นชื่อ
+  await convertAddressIds();
+}
+
+/**
+ * Reset ข้อมูลทุกครั้งที่เปิดคนใหม่
+ */
+function resetData() {
+  // Reset ข้อมูลส่วนตัว
+  personalForm.value = undefined;
+  age.value = "";
+  rows.value = [];
+  
+  // Reset ข้อมูลที่อยู่
+  currentProvinceName.value = "";
+  currentDistrictName.value = "";
+  currentSubDistrictName.value = "";
+  registProvinceName.value = "";
+  registDistrictName.value = "";
+  registSubDistrictName.value = "";
+}
+
+/**
+ * ฟังก์ชันแปลง ID เป็นชื่อจริงของที่อยู่ (แบบ optimize)
+ */
+async function convertAddressIds() {
+  if (!personalForm.value) return;
+
+  try {
+    // โหลดข้อมูลจังหวัดครั้งเดียวถ้ายังไม่มี
+    await loadProvinces();
+
+    // แปลงข้อมูลที่อยู่ปัจจุบัน
+    if (personalForm.value.currentProvinceId && personalForm.value.currentProvinceId.trim() !== "") {
+      currentProvinceName.value = getProvinceNameFromCache(
+        personalForm.value.currentProvinceId
+      );
+
+      if (personalForm.value.currentDistrictId && personalForm.value.currentDistrictId.trim() !== "") {
+        currentDistrictName.value = await getDistrictNameOptimized(
+          personalForm.value.currentProvinceId,
+          personalForm.value.currentDistrictId
+        );
+
+        if (personalForm.value.currentSubDistrictId && personalForm.value.currentSubDistrictId.trim() !== "") {
+          currentSubDistrictName.value = await getSubDistrictNameOptimized(
+            personalForm.value.currentDistrictId,
+            personalForm.value.currentSubDistrictId
+          );
+        }
+      }
+    }
+
+    // แปลงข้อมูลที่อยู่ตามทะเบียน
+    if (personalForm.value.registProvinceId && personalForm.value.registProvinceId.trim() !== "") {
+      registProvinceName.value = getProvinceNameFromCache(
+        personalForm.value.registProvinceId
+      );
+
+      if (personalForm.value.registDistrictId && personalForm.value.registDistrictId.trim() !== "") {
+        registDistrictName.value = await getDistrictNameOptimized(
+          personalForm.value.registProvinceId,
+          personalForm.value.registDistrictId
+        );
+
+        if (personalForm.value.registSubDistrictId && personalForm.value.registSubDistrictId.trim() !== "") {
+          registSubDistrictName.value = await getSubDistrictNameOptimized(
+            personalForm.value.registDistrictId,
+            personalForm.value.registSubDistrictId
+          );
+        }
+      }
+    }
+  } catch (error) {
+    console.error("Error converting address IDs:", error);
+  }
+}
+
+/**
+ * โหลดข้อมูลจังหวัดทั้งหมด (ครั้งเดียว)
+ */
+async function loadProvinces() {
+  if (provincesCache.value.length === 0) {
+    try {
+      const res = await http.get(config.API.province);
+      provincesCache.value = res.data.result;
+    } catch (error) {
+      console.error("Error loading provinces:", error);
+    }
+  }
+}
+
+/**
+ * ดึงชื่อจังหวัดจาก cache
+ */
+function getProvinceNameFromCache(provinceId: string): string {
+  const province = provincesCache.value.find(
+    (p: any) => p.id.toString() === provinceId
+  );
+  return province ? province.name : "-";
+}
+
+/**
+ * ดึงชื่ออำเภอแบบ optimize (เรียก API เฉพาะจังหวัดที่ต้องการ)
+ * @param provinceId ID ของจังหวัด
+ * @param districtId ID ของอำเภอ
+ */
+async function getDistrictNameOptimized(
+  provinceId: string,
+  districtId: string
+): Promise<string> {
+  try {
+    // เช็ค cache ว่ามีข้อมูล districts ของ province นี้หรือไม่
+    if (!districtsCache.value.has(provinceId)) {
+      const res = await http.get(config.API.listDistrict(provinceId));
+      districtsCache.value.set(provinceId, res.data.result.districts);
+    }
+
+    const districts = districtsCache.value.get(provinceId) || [];
+    const district = districts.find((d: any) => d.id.toString() === districtId);
+    return district ? district.name : "-";
+  } catch (error) {
+    console.error("Error loading district:", error);
+    return "-";
+  }
+}
+
+/**
+ * ดึงชื่อตำบลแบบ optimize (เรียก API เฉพาะอำเภอที่ต้องการ)
+ * @param districtId ID ของอำเภอ
+ * @param subDistrictId ID ของตำบล
+ */
+async function getSubDistrictNameOptimized(
+  districtId: string,
+  subDistrictId: string
+): Promise<string> {
+  try {
+    // เช็ค cache ว่ามีข้อมูล subDistricts ของ district นี้หรือไม่
+    if (!subDistrictsCache.value.has(districtId)) {
+      const res = await http.get(config.API.listSubDistrict(districtId));
+      subDistrictsCache.value.set(districtId, res.data.result.subDistricts);
+    }
+
+    const subDistricts = subDistrictsCache.value.get(districtId) || [];
+    const subDistrict = subDistricts.find(
+      (sd: any) => sd.id.toString() === subDistrictId
+    );
+    return subDistrict ? subDistrict.name : "-";
+  } catch (error) {
+    console.error("Error loading subdistrict:", error);
+    return "-";
+  }
 }
 
 /**
@@ -131,7 +308,7 @@ function formBmaofficer(val: string) {
  */
 async function close() {
   props.close();
-  rows.value = [];
+  resetData(); // Reset ข้อมูลเมื่อปิด dialog
 }
 
 /**
@@ -170,30 +347,58 @@ watch(props, () => {
 
               <div class="row q-pa-xs">
                 <div class="col-3 header-sub-text">
-                  <div class="q-pb-md">เลขประจำตัวประชาชน</div>
-                  <div>วัน/เดือน/ปีเกิด</div>
+                  <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>
                 </div>
 
                 <div class="col-4 sub-text">
-                  <div class="q-pb-md">
+                  <div class="q-pb-sm">
                     {{ personalForm?.idCard }}
                   </div>
-                  <div>
+                  <div class="q-pb-sm">
                     {{ date2Thai(personalForm?.dateOfBirth) }}
                   </div>
+                  <div class="q-pb-sm">
+                    {{ age ? age : "-" }}
+                  </div>
+                  <div class="q-pb-sm">
+                    {{
+                      personalForm?.nationality ? personalForm.nationality : "-"
+                    }}
+                  </div>
+                  <div>
+                    {{
+                      personalForm?.bloodGroup ? personalForm.bloodGroup : "-"
+                    }}
+                  </div>
                 </div>
 
                 <div class="col-2 header-sub-text">
-                  <div class="q-pb-md">ชื่อ-นามสกุล</div>
-                  <div>เพศ</div>
+                  <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>
                 </div>
                 <div class="col-3 sub-text">
-                  <div class="q-pb-md">
+                  <div class="q-pb-sm">
                     {{ personalForm?.fullName }}
                   </div>
-                  <div>
+                  <div class="q-pb-sm">
                     {{ personalForm?.gender }}
                   </div>
+                  <div class="q-pb-sm">
+                    {{ personalForm?.race ? personalForm.race : "-" }}
+                  </div>
+                  <div class="q-pb-sm">
+                    {{ personalForm?.religion ? personalForm.religion : "-" }}
+                  </div>
+                  <div class="q-mt-sm">
+                    {{ personalForm?.telephone ? personalForm.telephone : "-" }}
+                  </div>
                 </div>
               </div>
             </q-card>
@@ -203,9 +408,90 @@ watch(props, () => {
             <q-card bordered class="card-panding">
               <div class="row items-center q-pa-xs header-text">ภูมิลำเนา</div>
               <div class="row q-pa-xs">
-                <div class="col-3 header-sub-text">ที่อยู่</div>
-                <div class="col-9 sub-text">
-                  {{ personalForm?.registAddress }}
+                <!-- ที่อยู่ปัจจุบัน -->
+                <div class="col-6">
+                  <div class="q-pb-sm text-weight-medium text-primary">
+                    ที่อยู่ปัจจุบัน
+                  </div>
+                  <div class="row">
+                    <div class="col-4 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>
+                    </div>
+                    <div class="col-8 sub-text">
+                      <div class="q-pb-sm">
+                        {{
+                          personalForm?.currentAddress
+                            ? personalForm.currentAddress
+                            : "-"
+                        }}
+                      </div>
+                      <div class="q-pb-sm">
+                        {{ currentProvinceName ? currentProvinceName : "-" }}
+                      </div>
+                      <div class="q-pb-sm">
+                        {{ currentDistrictName ? currentDistrictName : "-" }}
+                      </div>
+                      <div class="q-pb-sm">
+                        {{
+                          currentSubDistrictName ? currentSubDistrictName : "-"
+                        }}
+                      </div>
+                      <div class="q-mt-sm">
+                        {{
+                          personalForm?.currentZipCode
+                            ? personalForm.currentZipCode
+                            : "-"
+                        }}
+                      </div>
+                    </div>
+                  </div>
+                </div>
+
+                <!-- ที่อยู่ตามทะเบียนบ้าน -->
+                <div class="col-6">
+                  <div class="q-pb-sm text-weight-medium text-primary">
+                    ที่อยู่ตามทะเบียนบ้าน
+                  </div>
+                  <div class="row">
+                    <div class="col-4 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>
+                    </div>
+                    <div class="col-8 sub-text">
+                      <div class="q-pb-sm">
+                        {{
+                          personalForm?.registAddress
+                            ? personalForm.registAddress
+                            : "-"
+                        }}
+                      </div>
+                      <div class="q-pb-sm">
+                        {{ registProvinceName ? registProvinceName : "-" }}
+                      </div>
+                      <div class="q-pb-sm">
+                        {{ registDistrictName ? registDistrictName : "-" }}
+                      </div>
+                      <div class="q-pb-sm">
+                        {{
+                          registSubDistrictName ? registSubDistrictName : "-"
+                        }}
+                      </div>
+                      <div class="q-mt-sm">
+                        {{
+                          personalForm?.registZipCode
+                            ? personalForm.registZipCode
+                            : "-"
+                        }}
+                      </div>
+                    </div>
+                  </div>
                 </div>
               </div>
             </q-card>
@@ -239,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

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { onMounted, ref, watch, reactive } from "vue";
+import { onMounted, ref, watch } from "vue";
 import { useQuasar } from "quasar";
 
 import { useRoute } from "vue-router";
@@ -11,6 +11,7 @@ import { useStructureTree } from "@/stores/structureTree";
 
 /** importType*/
 import type {
+  DataList,
   PositionMaim,
   PositionNo,
   Positions,
@@ -41,17 +42,14 @@ const {
 
 /**props*/
 const modal = defineModel<boolean>("modal", { required: true });
-const props = defineProps({
-  dataRow: {
-    type: Object,
-    require: true,
-  },
-  fetchTable: {
-    type: Function,
-    require: true,
-  },
-  fetchStatCard: { type: Function, require: true },
-});
+
+interface Props {
+  dataRow?: DataList;
+  fetchTable?: () => Promise<void>;
+  fetchStatCard?: () => Promise<void>;
+}
+
+const props = defineProps<Props>();
 
 /** Tree*/
 const nodeId = ref<string>("");
@@ -65,15 +63,16 @@ const expanded = ref<string[]>([]);
 const positionUse = ref<string[]>([]);
 const positionNo = ref<DataPositionNo[]>([]);
 const positionId = ref<string>("");
-const seletcId = ref<string>("");
+const selectId = ref<string>("");
 const posType = ref<FormPosType | null>(null);
 const posLevel = ref<string>("");
-const selectedPos = ref<any[]>([]);
-const datePos = ref<Date>(new Date());
-const posMasterMain = ref<any[]>([]);
+const selectedPos = ref<Positions[]>([]);
+const datePos = ref<Date | null>(new Date());
+const posMasterMain = ref<PositionMaim[]>([]);
 const orgRevisionId = ref<string>("");
 const optionPosType = ref<FormPosType[]>([]);
 const optionPosLevel = ref<FormPosLevel[]>([]);
+const isLoadPosition = ref<boolean>(false);
 
 /** function เรียกข้อมูลโครงสร้าง แบบปัจุบันและ แบบร่าง*/
 async function fetchStructure() {
@@ -91,12 +90,14 @@ async function fetchStructure() {
  */
 function updateSelected(data: TreeMain) {
   if (props?.dataRow?.nodeId === data.orgTreeId) {
-    positionId.value = props?.dataRow?.posmasterId;
-    seletcId.value = props?.dataRow?.positionId;
-    datePos.value = props?.dataRow?.reportingDate;
+    positionId.value = props?.dataRow?.posmasterId ?? "";
+    selectId.value = props?.dataRow?.positionId ?? "";
+    datePos.value = props?.dataRow?.reportingDate
+      ? new Date(props.dataRow.reportingDate)
+      : new Date();
   } else {
     positionId.value = "";
-    seletcId.value = "";
+    selectId.value = "";
     selectedPos.value = [];
     datePos.value = new Date();
   }
@@ -117,6 +118,8 @@ const isPosition = ref<string>("exam");
 // const isPositionOld = ref<boolean>(false);
 async function fetchDataTable(id: string, level: number = 0) {
   showLoader();
+  isLoadPosition.value = false;
+  positionNo.value = [];
   const body = {
     node: level,
     nodeId: id,
@@ -150,7 +153,7 @@ async function fetchDataTable(id: string, level: number = 0) {
         if (p.length !== 0) {
           const a = p.find((el: Positions) => el.positionIsSelected === true);
           const { id, ...rest } = a ? a : p[0];
-          const data: any = { ...e, ...rest };
+          const data: PositionMaim = { ...e, ...rest } as PositionMaim;
           dataMain.push(data);
         }
       });
@@ -162,21 +165,22 @@ async function fetchDataTable(id: string, level: number = 0) {
           (e) => e !== props.dataRow?.posmasterId
         );
 
-        positionNo.value = posMain.filter((e: any) => !newUse.includes(e.id));
+        positionNo.value = posMain.filter(
+          (e: DataPositionNo) => !newUse.includes(e.id)
+        );
       } else {
         positionNo.value = posMain.filter(
-          (e: any) => !positionUse.value.includes(e.id)
+          (e: DataPositionNo) => !positionUse.value.includes(e.id)
         );
       }
+
+      isLoadPosition.value = true;
     })
     .catch((err) => {
       messageError($q, err);
-      hideLoader();
     })
     .finally(() => {
-      setTimeout(() => {
-        hideLoader();
-      }, 1000);
+      hideLoader();
     });
 }
 
@@ -198,9 +202,11 @@ async function fetchPosFind(level: number, id: string) {
 
       expanded.value = data;
       nodeId.value = id;
-      positionId.value = props?.dataRow?.posmasterId;
-      seletcId.value = props?.dataRow?.positionId;
-      datePos.value = props?.dataRow?.reportingDate;
+      positionId.value = props?.dataRow?.posmasterId ?? "";
+      selectId.value = props?.dataRow?.positionId ?? "";
+      datePos.value = props?.dataRow?.reportingDate
+        ? new Date(props.dataRow.reportingDate)
+        : new Date();
 
       fetchDataTable(nodeId.value, level);
     })
@@ -212,12 +218,14 @@ async function fetchPosFind(level: number, id: string) {
 
 /** function บันทึกข้อมูลตำแหน่ง*/
 async function onClickSubmit() {
-  const dataPosMaster = await posMasterMain.value?.find(
-    (e: any) => e.id === positionId.value
+  const dataPosMaster = posMasterMain.value?.find(
+    (e) => e.id === positionId.value
   );
 
   if (selectedPos.value.length === 0) {
     dialogMessageNotify($q, "กรุณาเลือกตำแหน่ง");
+  } else if (!dataPosMaster) {
+    dialogMessageNotify($q, "ไม่พบข้อมูลตำแหน่ง");
   } else {
     dialogConfirm($q, async () => {
       showLoader();
@@ -235,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, //ด้านทางการบริหาร
@@ -272,6 +281,9 @@ function clearData() {
   posLevel.value = "";
   isPosition.value = "exam";
   filterTree.value = "";
+  datePos.value = new Date();
+  isLoadPosition.value = false;
+  positionNo.value = [];
 }
 
 /** callback function เมื่อมีการเปิด popup*/
@@ -280,9 +292,11 @@ watch(
   async () => {
     if (modal.value) {
       await fetchPositionUes();
-
       if (props?.dataRow?.node !== null && props?.dataRow?.nodeId !== null) {
-        await fetchPosFind(props?.dataRow?.node, props?.dataRow?.nodeId);
+        await fetchPosFind(
+          props?.dataRow?.node ?? 0,
+          props?.dataRow?.nodeId ?? ""
+        );
       } else {
         expanded.value = [];
       }
@@ -323,8 +337,7 @@ async function getOrgPosType() {
     })
     .catch((e) => {
       messageError($q, e);
-    })
-    .finally(() => {});
+    });
 }
 
 function onPosType() {
@@ -336,28 +349,15 @@ function onPosType() {
 }
 
 watch(
-  () => isAll.value,
-  (value, oldVal) => {
-    if (value !== oldVal) {
+  [isAll, isBlank, () => isPosition.value],
+  ([newAll, newBlank, newPos], [oldAll, oldBlank, oldPos]) => {
+    const shouldFetch = newAll !== oldAll || newBlank !== oldBlank;
+    const isSelectMode = newPos === "select" && oldPos !== "select";
+
+    if (shouldFetch || isSelectMode) {
       fetchDataTable(nodeId.value, nodeLevel.value);
     }
-  }
-);
-
-watch(
-  () => isBlank.value,
-  (value, oldVal) => {
-    if (value !== oldVal) {
-      fetchDataTable(nodeId.value, nodeLevel.value);
-    }
-  }
-);
-
-watch(
-  () => isPosition.value === "select",
-  (value, oldVal) => {
-    if (value !== oldVal) {
-      fetchDataTable(nodeId.value, nodeLevel.value);
+    if (isSelectMode) {
       getOrgPosType();
     }
   }
@@ -458,15 +458,15 @@ onMounted(() => {
                 :name="item"
               >
                 <CardPosition
-                  v-model:position="positionNo as []"
+                  v-model:position="positionNo"
                   v-model:selectedPos="selectedPos"
                   v-model:datePos="datePos"
                   v-model:positionId="positionId"
-                  v-model:seletcId="seletcId"
+                  v-model:selectId="selectId"
                   v-model:is-all="isAll"
                   v-model:is-blank="isBlank"
                   v-model:is-position="isPosition"
-                  v-model:pos-type="posType as FormPosType"
+                  v-model:pos-type="posType"
                   v-model:pos-level="posLevel"
                   v-model:option-pos-type="optionPosType"
                   v-model:option-pos-level="optionPosLevel"
@@ -474,7 +474,8 @@ onMounted(() => {
                   :on-pos-type="onPosType"
                   :node-id="nodeId"
                   :node-level="nodeLevel"
-                  :bma-officer="props.dataRow?.bmaOfficer"
+                  :bma-officer="props.dataRow?.bmaOfficer ?? ''"
+                  :is-load-position="isLoadPosition"
                 />
               </q-tab-panel>
             </q-tab-panels>

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";
@@ -9,6 +9,8 @@ import { useRoute, useRouter } from "vue-router";
 import { checkPermission } from "@/utils/permissions";
 import { useCounterMixin } from "@/stores/mixin";
 import { usePlacementDataStore } from "@/modules/05_placement/store";
+import { useMenuDataStore } from "@/stores/menuList";
+import { validateFileSize } from "@/utils/function";
 import avatar from "@/assets/avatar_user.jpg";
 
 import type { PartialTableName } from "@/modules/05_placement/interface/request/placement";
@@ -27,6 +29,7 @@ import DialogPreviewCommand from "@/modules/18_command/components/DialogPreviewC
 
 const $q = useQuasar(); // show dialog
 const DataStore = usePlacementDataStore();
+const storeMenu = useMenuDataStore();
 const route = useRoute();
 const router = useRouter();
 const mixin = useCounterMixin(); //เรียกฟังก์ชันกลาง
@@ -45,7 +48,7 @@ const {
 /** รับค่ามาจากหน้าหลัก */
 const props = defineProps({
   statCard: {
-    type: Function,
+    type: Function as PropType<() => Promise<void>>,
     default: () => console.log("getStat"),
   },
 });
@@ -55,7 +58,14 @@ const command = ref<string>("");
 const commandId = ref<string>("");
 const commandCitizenId = ref<string>("");
 
-let roleAdmin = ref<boolean>(false);
+// เปลี่ยนจาก ref เป็น computed property
+const roleAdmin = computed(() => {
+  if (!storeMenu.permissions) return false;
+
+  const permission = checkPermission(route);
+  return DataStore.isOfficer || permission?.attrOwnership == "OWNER";
+});
+
 const edit = ref<boolean>(true);
 const modalPersonal = ref<boolean>(false);
 const modal = ref<boolean>(false); //modal ขอผ่อนผัน + สละสิทธิ์
@@ -84,7 +94,6 @@ const appointModal = ref<boolean>(false);
 const getNumFile = ref(0);
 const dataRes = ref<any>([]);
 const personal = ref<any>([]);
-const displayAdd = ref<boolean>(true);
 const containStatus = ref<boolean>(false);
 const modaladdlist = ref<boolean>(false);
 const selected = ref<any>([]);
@@ -92,6 +101,13 @@ const personal_selected = ref<any>([]);
 const filterlistAdd = ref<string>("");
 const paging = ref<boolean>(true);
 
+const displayAdd = computed(() => {
+  if (!storeMenu.permissions) return true;
+
+  const permission = checkPermission(route);
+  return roleAdmin.value || permission?.attrOwnership === "OWNER";
+});
+
 // เช็ตสถานะการเลือกคนไปยังหน่วยงาน
 const checkSelected = computed(() => {
   if (selected.value.length === 0) {
@@ -248,16 +264,17 @@ const columnsBase = ref<QTableProps["columns"]>([
   },
 ]);
 
-const columns = computed(() =>
-  roleAdmin.value || checkPermission(route)?.attrOwnership == "OWNER"
+const columns = computed(() => {
+  const permission = checkPermission(route);
+  return roleAdmin.value || permission?.attrOwnership == "OWNER"
     ? columnsBase.value
     : columnsBase.value?.filter(
         (col) =>
           col.name !== "no" &&
           col.name !== "draft" &&
           col.name !== "refCommandNo"
-      )
-);
+      );
+});
 
 /**
  * แปลงสถานะพนักงาน
@@ -406,8 +423,9 @@ async function getTable() {
           rowsAll.value.push(rowData);
         });
 
+      const permission = checkPermission(route);
       const rowData = await (roleAdmin.value ||
-      checkPermission(route)?.attrOwnership == "OWNER"
+      permission?.attrOwnership == "OWNER"
         ? rowsAll.value
         : rowsAll.value.filter((x: any) => x.isDraft === true));
 
@@ -554,8 +572,9 @@ function getClass(val: boolean) {
  * @param draft status
  */
 function selectData(pid: string, draft: string) {
+  const permission = checkPermission(route);
   if (
-    (roleAdmin.value || checkPermission(route)?.attrOwnership == "OWNER") &&
+    (roleAdmin.value || permission?.attrOwnership == "OWNER") &&
     draft === "ส่งตัวแล้ว"
   ) {
     personalId.value = pid;
@@ -858,34 +877,33 @@ async function filterRowsMain(type: string, pos: string) {
   });
 }
 
+// Helper function รอให้ permissions load เสร็จ
+function waitForPermissions(): Promise<void> {
+  return new Promise((resolve) => {
+    const checkPermissions = () => {
+      if (storeMenu.permissions) {
+        resolve();
+      } else {
+        setTimeout(checkPermissions, 100); // เช็คทุก 100ms
+      }
+    };
+    checkPermissions();
+  });
+}
+
+// ปรับปรุง getWorkFlow function
 async function getWorkFlow() {
   showLoader();
+
+  // รอให้ permissions load เสร็จก่อน
+  await waitForPermissions();
+
   await http
     .get(config.API.workflowKeycloakSystem("SYS_PLACEMENT_PASS"))
     .then(async (res) => {
       const data = await res.data.result;
       DataStore.isOfficer = data.isOfficer;
       DataStore.isStaff = data.isStaff;
-      roleAdmin.value =
-        data.isOfficer || checkPermission(route)?.attrOwnership == "OWNER";
-      if (
-        roleAdmin.value === false &&
-        checkPermission(route)?.attrOwnership !== "OWNER"
-      ) {
-        displayAdd.value = false;
-        // visibleColumns.value = [
-        //   "position",
-        //   "fullName",
-        //   "examNumber",
-        //   "idCard",
-        //   "positionNumber",
-        //   "organizationName",
-        //   "reportingDate",
-        //   "bmaOfficer",
-        //   "statusName",
-        //   "positionCandidate",
-        // ];
-      }
     })
     .catch((e) => {
       messageError($q, e);
@@ -950,6 +968,28 @@ function onUpdateStatus(id: string) {
   );
 }
 
+function onUpdateDraftStatus(id: string) {
+  dialogConfirm(
+    $q,
+    async () => {
+      showLoader();
+      try {
+        await http.post(config.API.placementUpdateDraftStatus, {
+          personalId: id,
+        });
+        await success($q, "บันทึกสำเร็จ");
+        await getTable();
+      } catch (error) {
+        messageError($q, error);
+      } finally {
+        hideLoader();
+      }
+    },
+    "ยืนยันการยกเลิกการส่งตัว",
+    "ต้องการยกเลิกการส่งตัวรายชื่อนี้ใช่หรือไม่ ?"
+  );
+}
+
 onMounted(async () => {
   await getWorkFlow();
   await getTable();
@@ -1012,6 +1052,31 @@ onMounted(async () => {
                     </q-item-section>
                     <q-item-section>รายละเอียด</q-item-section>
                   </q-item>
+                  <q-item
+                    v-if="
+                      checkPermission($route)?.attrIsUpdate &&
+                      props.row.isDraft &&
+                      props.row.statusId === 'PREPARE-CONTAIN' &&
+                      (DataStore.isOfficer ||
+                        checkPermission($route)?.attrOwnership == 'OWNER')
+                    "
+                    clickable
+                    v-close-popup
+                    @click="onUpdateDraftStatus(props.row.personalId)"
+                  >
+                    <q-item-section
+                      style="min-width: 0px"
+                      avatar
+                      class="q-py-sm"
+                    >
+                      <q-icon
+                        color="red"
+                        size="xs"
+                        name="mdi-account-arrow-left-outline"
+                      />
+                    </q-item-section>
+                    <q-item-section>ยกเลิกการส่งตัว</q-item-section>
+                  </q-item>
 
                   <q-item
                     v-if="
@@ -1480,7 +1545,10 @@ onMounted(async () => {
               :label="`${'เลือกไฟล์เอกสารหลักฐาน'}`"
               outlined
               use-chips
-              :rules="[(val:string) => !!val || 'กรุณาเลือกไฟล์เอกสารหลักฐาน']"
+              :rules="[
+                (val) => !!val || 'กรุณาเลือกไฟล์เอกสารหลักฐาน',
+                (val) => validateFileSize(val),
+              ]"
               multiple
               @update:model-value="clickEditRow"
               class="q-py-sm"

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="[
-                      (val:string) => {
-                        return val.length > 0 || 'กรุณาเลือกคำนำหน้าชื่อ';
-                      },
-                    ]"
+                    :rules="prefixRankRule()"
+                    reactive-rules
                     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 ?? ""} ${
-        data.lastName ?? ""
-      }`;
+      title.value.fullname = `${data.rank ? data.rank : data.prefix ?? ""}${
+        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

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

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

@@ -201,6 +201,7 @@ watch(modal, (val) => {
                 hide-bottom-space
                 dense
                 label="คำค้น"
+                @keydown.enter.prevent="onSearchData()"
               />
             </div>
             <q-checkbox

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

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

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

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

src/modules/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/interface/response/SelectOrg.ts

@@ -1,17 +1,24 @@
 interface DataList {
   avatar: string;
   bmaOfficer: string;
+  bmaOfficerCheck?: string;
   deferment: boolean;
   draft: string;
   examNumber: number;
   fullName: string;
   idCard: string;
   name: string;
+  node: number | null;
+  nodeId: string | null;
   orgName: string | null;
   organizationName: string;
   organizationShortName: string | null;
   personalId: string;
+  posLevelCandidateId: string | null;
+  posmasterId: string | null;
+  posTypeCandidateId: string | null;
   positionCandidate: string;
+  positionId: string | null;
   positionNumber: string | null;
   positionPath: string | null;
   profilePhoto: 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 {
-    main: { columns: String[] };
-    education: { columns: String[] };
-    certicate: { columns: String[] };
-    train: { columns: String[] };
-    insignia: { columns: String[] };
-    coined: { columns: String[] };
-    assessment: { columns: String[] };
-    salary: { columns: String[] };
-    discipline: { columns: String[] };
-    leave: { columns: String[] };
-    talent: { columns: String[] };
-    work: { columns: String[] };
-    record: { columns: String[] };
-    other: { columns: String[] };
-    document: { columns: String[] };
-  }
+interface profile {
+  main: { columns: String[] };
+  education: { columns: String[] };
+  certicate: { columns: String[] };
+  train: { columns: String[] };
+  insignia: { columns: String[] };
+  coined: { columns: String[] };
+  assessment: { columns: String[] };
+  salary: { columns: String[] };
+  discipline: { columns: String[] };
+  leave: { columns: String[] };
+  talent: { columns: String[] };
+  work: { columns: String[] };
+  record: { columns: String[] };
+  other: { 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:
-        e.orgShortname +
-        (e.posMasterNoPrefix != null ? e.posMasterNoPrefix : " ") +
-        e.posMasterNo +
-        (e.posMasterNoSuffix != null ? e.posMasterNoSuffix : " "),
+      posMasterNo: formatPosmasterNo(
+        e.orgShortname,
+        e.posMasterNoPrefix,
+        e.posMasterNo.toString(),
+        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 } =
-  mixin;
+const {
+  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.dateEnd
+      item.dateStart
   );
   rows2.value = row;
   rows2Data.value = row;

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

@@ -381,7 +381,7 @@ async function fecthlistappointment() {
           e.positionTypeOld &&
           e.positionLevelOld &&
           e.positionNumberOld &&
-          e.positionDate
+          (e.typeCommand === "MOVE" || e.positionDate)
       );
       rows2.value = listData;
       rows2Data.value = listData;
@@ -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/07_appointEmployeeMain.vue

@@ -252,7 +252,7 @@ async function fecthlistappointment() {
           e.positionTypeOld &&
           e.positionLevelOld &&
           e.positionNumberOld &&
-          e.positionDate
+          (e.positionDate || e.typeCommand === "MOVE")
       );
       rows2.value = listData;
       rows2Data.value = listData;

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/01_retirement/RetirementDetail.vue

@@ -370,18 +370,32 @@ async function uploadFile(event: any, date: any) {
  */
 async function downloadAttachment(type: string, id: string) {
   showLoader();
-  await http
-    .get(config.API.reportRetireList(type, id))
-    .then(async (res) => {
-      const data = res.data.result;
-      await genReport(data, `รายชื่อผู้เกษียณอายุราชการ`, type);
-    })
-    .catch(async (e) => {
-      messageError($q, JSON.parse(await e.response.data.text()));
-    })
-    .finally(() => {
-      hideLoader();
-    });
+  try {
+    const response = await http.get(
+      config.API.retirementReport + `/${type}/${id}`,
+      {
+        headers: {
+          accept:
+            type === "pdf"
+              ? "application/pdf"
+              : "application/vnd.openxmlformats-officedocument.wordprocessingml.document",
+          "content-Type": "application/json",
+        },
+        responseType: "blob",
+      }
+    );
+    const blob = response.data;
+    const url = URL.createObjectURL(blob);
+    const link = document.createElement("a");
+    link.href = url;
+    link.download = `รายชื่อผู้เกษียณอายุราชการ.${type}`;
+    link.click();
+    URL.revokeObjectURL(url);
+  } catch (e) {
+    messageError($q, e);
+  } finally {
+    hideLoader();
+  }
 }
 
 // ยืนยันการแก้ไขข้อมูล

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"
   />