Merge branch 'develop' into dev

* develop:
  fixed OWNER สามารถแก้ชื่อ นามสกุล เพศและคำนำหน้าชื่อได้

package.json

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

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

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

src/api/recruiting/api.recruit.ts

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

src/components/CardProfile.vue

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

src/components/DialogHeader.vue

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

src/components/Dialogs/AddPersonal.vue

@@ -332,6 +332,7 @@ watch(
               outlined
               dense
               label="คำค้น"
+              @keydown.enter.prevent="searchInput()"
             >
               <template v-slot:after>
                 <q-btn

src/components/Dialogs/DialogOrgSelect.vue

@@ -512,12 +512,14 @@ function onSubmit() {
       posLevelId: selectedPos.value[0].posLevelId, //ชื่อตำแหน่ง
       posLevelName: selectedPos.value[0].posLevelName, //ชื่อตำแหน่ง
       posExecutiveName: selectedPos.value[0].posExecutiveName, //ชื่อตำแหน่ง
+      posExecutiveId: selectedPos.value[0].posExecutiveId, //ชื่อตำแหน่ง
       reportingDate: convertDateToAPI(datePos.value),
       posmasterId: dataPosMaster.id,
       typeCommand: type.value,
       positionExecutiveField: selectedPos.value[0].positionExecutiveField, //ด้านทางการบริหาร
       positionArea: selectedPos.value[0].positionArea, //ด้าน/สาขา
     };
+    console.log(body);
 
     await props.onSubmit?.(body);
     close();

src/components/Dialogs/DialogOrgSelectEmployee.vue

@@ -232,7 +232,8 @@ function close() {
 
 async function getDataTable(id: string, level: number = 0) {
   showLoader();
-
+  positionNo.value = [];
+  rowsData.value = [];
   const body = {
     node: level,
     nodeId: id,
@@ -265,6 +266,7 @@ async function getDataTable(id: string, level: number = 0) {
         posMasterNo:
           e.orgShortname +
           (e.posMasterNoPrefix != null ? e.posMasterNoPrefix : "") +
+          " " +
           e.posMasterNo +
           (e.posMasterNoSuffix != null ? e.posMasterNoSuffix : ""),
         positionName: e.positionName,
@@ -302,9 +304,7 @@ async function getDataTable(id: string, level: number = 0) {
       messageError($q, err);
     })
     .finally(() => {
-      setTimeout(() => {
       hideLoader();
-      }, 1000);
     });
 }
 

src/components/Dialogs/PopupPersonalNew.vue

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

src/components/Workflow/DialogSelectPerson.vue

@@ -5,7 +5,6 @@ import { useQuasar } from "quasar";
 import { useCounterMixin } from "@/stores/mixin";
 import http from "@/plugins/http";
 import config from "@/app.config";
-import { getColumnLabel } from "@/utils/function";
 
 import type { QTableProps } from "quasar";
 
@@ -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/DialogHistoryPos.vue

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

src/modules/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) {
+  selected_row_id.value = id;
+  const isRunning = await checkJobStatus(id, "candidate");
+
+  if (isRunning) {
+    showUploadRunningDialog();
+  } else {
     modalCandidate.value = true;
     textTittleCandidate.value = "นำเข้าผู้สมัครสอบแข่งขัน";
-  selected_row_id.value = id;
+  }
 }
 
 /**
@@ -345,9 +412,15 @@ async function clickUpload(id: string) {
  * @param id รอบสอบเเข่งขัน
  */
 async function clickEdit(id: string) {
+  selected_row_id.value = id;
+  const isRunning = await checkJobStatus(id, "score");
+
+  if (isRunning) {
+    showUploadRunningDialog();
+  } else {
     modalScore.value = true;
     textTittleScore.value = "นำเข้าบัญชีรวมคะแนน";
-  selected_row_id.value = id;
+  }
 }
 
 /**
@@ -355,9 +428,57 @@ async function clickEdit(id: string) {
  * @param id รอบสอบเเข่งขัน
  */
 async function clickResult(id: string) {
+  selected_row_id.value = id;
+  const isRunning = await checkJobStatus(id, "result");
+
+  if (isRunning) {
+    showUploadRunningDialog();
+  } else {
     modalResult.value = true;
     textTittleResult.value = "นำเข้าไฟล์ผลการสอบ";
-  selected_row_id.value = id;
+  }
+}
+
+/**
+ * ตรวจสอบสถานะการนำเข้าข้อมูล
+ * @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">
-      <q-form ref="myFormScore">
       <DialogHeadTemplate
         :title="textTittleCandidate"
         :close="clickCloseCandidate"
         title-type="ข้อมูลผู้สมัครสอบ"
       />
+      <q-form ref="myFormScore">
         <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">
-      <q-form ref="myFormScore">
       <DialogHeadTemplate
         :title="textTittleScore"
         :close="clickCloseScore"
         title-type="บัญชีรวมคะแนน"
       />
+      <q-form ref="myFormScore">
         <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">
-      <q-form ref="myFormScore">
       <DialogHeadTemplate
         :title="textTittleResult"
         :close="clickCloseResult"
         title-type="ผลการสอบ (บัญชีรายชื่อ)"
       />
+      <q-form ref="myFormScore">
         <q-separator />
         <q-card-section>
           <div class="col-12 row items-center q-col-gutter-sm">

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

@@ -212,17 +212,17 @@ const columnsPosition = ref<QTableProps["columns"]>([
       a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
   },
 
-  {
+  // {
-    name: "type",
+  //   name: "type",
-    align: "left",
+  //   align: "left",
-    label: "ประเภทแบบฟอร์ม",
+  //   label: "ประเภทแบบฟอร์ม",
-    sortable: true,
+  //   sortable: true,
-    field: "type",
+  //   field: "type",
-    headerStyle: "font-size: 14px",
+  //   headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
+  //   style: "font-size: 14px",
-    sort: (a: string, b: string) =>
+  //   sort: (a: string, b: string) =>
-      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  //     a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
-  },
+  // },
 ]);
 
 const shouldShowPaymentFields = computed(() => {
@@ -1476,7 +1476,7 @@ onMounted(async () => {
                       </div>
                     </q-td>
 
-                    <q-td key="type" :props="props">
+                    <!-- <q-td key="type" :props="props">
                       <selector
                         class=""
                         outlined
@@ -1490,7 +1490,7 @@ onMounted(async () => {
                         lazy-rules
                         :rules="[(val:any) => !!val || `${'กรุณาเลือกประเภทแบบฟอร์ม'}`]"
                       ></selector>
-                    </q-td>
+                    </q-td> -->
                   </q-tr>
                 </template>
               </ProfileTable>

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/PersonalInformation/01_Profile.vue

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

@@ -323,10 +323,10 @@ async function uploadFileURL(uploadUrl: string, file: any) {
  * ฟังก์ชันดึงข้อมูลรูปโปรไฟล์
  * @param id โปรไฟล์
  */
-async function fetchProfile(id: string) {
+function fetchProfile(id: string) {
-  await http
+  http
     .get(config.API.fileByFile("ทะเบียนประวัติ", "โปรไฟล์", id, fileName.value))
-    .then(async (res) => {
+    .then((res) => {
       profilePicture.value = res.data.downloadUrl;
     })
     .catch(() => {
@@ -403,7 +403,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;
       }

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

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

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

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

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

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

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

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

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

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

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

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

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

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

src/modules/05_placement/components/probation/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/interface/index/ProfileType.ts

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

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

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

src/modules/05_placement/store.ts

@@ -10,8 +10,7 @@ import type {
 } from "@/modules/05_placement/interface/request/Main";
 import type { FormOrderPlacementMainData } from "@/modules/05_placement/interface/request/Main";
 
-export const useProfileDataStore = defineStore("profilePlacenent", () => {
+interface profile {
-  interface profile {
   main: { columns: String[] };
   education: { columns: String[] };
   certicate: { columns: String[] };
@@ -27,8 +26,9 @@ export const useProfileDataStore = defineStore("profilePlacenent", () => {
   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,
   };
 });
-export const useOrderPlacementDataStore = defineStore("placementOrder", () => {
+interface placementOrder {
-  interface placementOrder {
   mappingPosition: { columns: String[] };
-  }
+}
+export const useOrderPlacementDataStore = defineStore("placementOrder", () => {
   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

@@ -14,9 +14,10 @@ export const useSelectOrgStore = defineStore("selectorg", () => {
       isPosition: e.isPosition,
       posMasterNo:
         e.orgShortname +
-        (e.posMasterNoPrefix != null ? e.posMasterNoPrefix : " ") +
+        (e.posMasterNoPrefix != null ? e.posMasterNoPrefix : "") +
+        " " +
         e.posMasterNo +
-        (e.posMasterNoSuffix != null ? e.posMasterNoSuffix : " "),
+        (e.posMasterNoSuffix != null ? e.posMasterNoSuffix : ""),
       positionName: e.positionName,
       posTypeName: e.posTypeName,
       posLevelName: e.posLevelName,

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

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

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

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

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

@@ -236,8 +236,7 @@ function openModalOrder() {
         item.status == "APPROVE") &&
       item.organizationPositionOld &&
       item.organization &&
-      item.dateStart &&
+      item.dateStart
-      item.dateEnd
   );
   rows2.value = row;
   rows2Data.value = row;

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

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

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

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

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

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

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

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

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

@@ -4,7 +4,6 @@ import { useQuasar, type QTableProps } from "quasar";
 
 import http from "@/plugins/http";
 import config from "@/app.config";
-import { getColumnLabel } from "@/utils/function";
 import { useCounterMixin } from "@/stores/mixin";
 
 import DialogHeader from "@/components/DialogHeader.vue";
@@ -229,6 +228,7 @@ watch(
                   label="ค้นหา"
                   v-model="keyword"
                   style="width: 300px"
+                  @keydown.enter.prevent="onSearchData"
                 >
                   <template v-slot:append>
                     <q-icon name="search"></q-icon>
@@ -308,9 +308,7 @@ watch(
                       :key="col.name"
                       :props="props"
                     >
-                      <span class="text-weight-medium">{{
+                      <span class="text-weight-medium">{{ col.label }}</span>
-                        getColumnLabel(col, isAct)
-                      }}</span>
                     </q-th>
                   </q-tr>
                 </template>

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

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

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

@@ -150,21 +150,41 @@ const rows = ref<RowsType>();
 // เช็คสิทธิ์การอนุมัติ
 const idCheck = computed(() => {
   if (typeAdd.value == "COMMANDER") {
-    return rows.value?.commanders.map((items: SeqTypeRow) => items.profileId);
+    return rows.value?.commanders.map((items: SeqTypeRow) => items.keyId);
   } else if (typeAdd.value == "APPROVER") {
-    return rows.value?.approvers.map((items: SeqTypeRow) => items.profileId);
+    return rows.value?.approvers.map((items: SeqTypeRow) => items.keyId);
   }
 });
 
 // เช็คสิทธิ์การเลือกผู้มีอำนาจ
 const commanderList = computed(() => {
-  if (typeAdd.value == "COMMANDER") {
+  if (typeAdd.value === "COMMANDER") {
-    return rows.value?.approvers.map((items: SeqTypeRow) => items.profileId);
+    return rows.value?.approvers.map((items: SeqTypeRow) => ({
-  } else if (typeAdd.value == "APPROVER") {
+      profileId: items.profileId,
-    return rows.value?.commanders.map((items: SeqTypeRow) => items.profileId);
+      isAct: items.isAct,
+    }));
+  } else if (typeAdd.value === "APPROVER") {
+    return rows.value?.commanders.map((items: SeqTypeRow) => ({
+      profileId: items.profileId,
+      isAct: items.isAct,
+    }));
   }
+  return [];
 });
 
+//
+const isAct = computed(() => {
+  if (typeAdd.value === "COMMANDER") {
+    return rows.value?.commanders && rows.value.commanders.length > 0
+      ? rows.value.commanders[0].isAct
+      : false;
+  } else if (typeAdd.value === "APPROVER") {
+    return rows.value?.approvers && rows.value.approvers.length > 0
+      ? rows.value.approvers[0].isAct
+      : false;
+  }
+  return false;
+});
 // เช็คว่าผู้ใช้มีสิทธิ์อนุมัติหรือไม่
 const approveCheck = computed(() => {
   const commanders = rows.value?.commanders;
@@ -672,10 +692,10 @@ onMounted(async () => {
         fetchOptionType(),
         fetchKeycloakPositionData(),
         fetchDetailLeave(paramsId),
-        checkOfficer(),
       ]);
 
       await checkLeaveType(formData.leaveTypeId, formData);
+      await checkOfficer();
     } finally {
       hideLoader();
     }
@@ -1272,5 +1292,6 @@ onMounted(async () => {
     :id-check="idCheck"
     :keycloak-user-id="keycloakUserId"
     :commanders-list="commanderList"
+    :commanders-is-act="isAct"
   />
 </template>

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

@@ -4,7 +4,6 @@ import { useQuasar, type QTableProps } from "quasar";
 
 import http from "@/plugins/http";
 import config from "@/app.config";
-import { getColumnLabel } from "@/utils/function";
 import { useCounterMixin } from "@/stores/mixin";
 
 import DialogHeader from "@/components/DialogHeader.vue";
@@ -30,6 +29,7 @@ const props = defineProps({
   fetchDetailLeave: Function,
   idCheck: Array,
   commandersList: Array,
+  commandersIsAct: Boolean,
 });
 
 const pageId = ref<string>(route.params.id as string);
@@ -117,7 +117,7 @@ async function getData() {
       total.value = data.total;
       rows.value = data.data;
       selected.value = data.data.filter((items: any) => {
-        return props.idCheck?.some((i: any) => i === items.id);
+        return props.idCheck?.some((i: any) => i === items.key);
       });
     })
     .catch((err) => {
@@ -153,10 +153,14 @@ function onSubmit() {
       ]
         .filter(Boolean)
         .join(" "),
+      isAct: isAct.value,
+      keyId: items.key,
     }));
 
     const hasCommander = selected.value.some((e) =>
-      props.commandersList?.some((i: any) => i === e.id)
+      props.commandersList?.some(
+        (i: any) => i.profileId === e.id && i.isAct === isAct.value
+      )
     );
 
     if (hasCommander) {
@@ -205,6 +209,7 @@ watch(
   () => modal.value,
   () => {
     if (modal.value) {
+      isAct.value = props.commandersIsAct ?? false;
       getSearch();
     }
   }
@@ -233,6 +238,7 @@ watch(
                   label="ค้นหา"
                   v-model="keyword"
                   style="width: 300px"
+                  @keydown.enter.prevent="onSearchData()"
                 >
                   <template v-slot:append>
                     <q-icon name="search"></q-icon>
@@ -312,9 +318,7 @@ watch(
                       :key="col.name"
                       :props="props"
                     >
-                      <span class="text-weight-medium">{{
+                      <span class="text-weight-medium">{{ col.label }}</span>
-                        getColumnLabel(col, isAct)
-                      }}</span>
                     </q-th>
                   </q-tr>
                 </template>

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

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

src/modules/09_leave/components/07_LeaveHistory/DialogForm.vue

@@ -322,6 +322,7 @@ watch(modal, async (val) => {
                     hide-bottom-space
                     dense
                     label="คำค้น"
+                    @keydown.enter.prevent="onSearchData(true)"
                   >
                     <template v-slot:after>
                       <q-btn

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

@@ -50,6 +50,8 @@ interface SeqTypeRow {
   keycloakId: string;
   approveStatus: string;
   comment: string;
+  keyId?: string;
+  isAct?: boolean;
 }
 interface DataDateMonthObject {
   month: number;

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

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

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

@@ -2,6 +2,7 @@
 import { ref } from "vue";
 import { useRoute } from "vue-router";
 import { useQuasar } from "quasar";
+import type { QTableColumn } from "quasar";
 
 import http from "@/plugins/http";
 import config from "@/app.config";
@@ -22,21 +23,12 @@ const checkRoutePermisson = ref<boolean>(
   route.name == "disciplineInvestigatefactsDetail"
 );
 
-const props = defineProps({
+const props = defineProps<{
-  rows: {
+  rows?: any[];
-    type: Array,
+  columns?: QTableColumn[];
-    default: [],
+  visibleColumns?: string[];
-  },
+  fetchData?: () => void;
-  columns: {
+}>();
-    type: Array,
-    default: [],
-  },
-  visibleColumns: {
-    type: Array,
-    default: [],
-  },
-  fetchData: Function,
-});
 
 const remark = ref<string>("");
 const selected = ref<any[]>([]);
@@ -100,7 +92,7 @@ function onSubmit() {
                 <q-card-section class="q-pa-xs">
                   <q-table
                     :columns="props.columns"
-                    :rows="rows"
+                    :rows="props.rows ?? []"
                     row-key="personId"
                     flat
                     bordered

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

@@ -10,7 +10,7 @@ import { useInvestigateFactStore } from "@/modules/11_discipline/store/Investiga
 import { useDisciplineMainStore } from "@/modules/11_discipline/store/Main";
 
 import type { ArrayPersonAdd } from "@/modules/11_discipline/interface/response/investigate";
-import type { FormData } from "@/modules/11_discipline/interface/request/InvestigateFact";
+import type { FormData } from "@/modules/11_discipline/interface/request/investigateFact";
 import type {
   FormData as FormDataComplaint,
   ArrayPerson,

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

@@ -11,7 +11,7 @@ import { useInvestigateDisStore } from "@/modules/11_discipline/store/Investigat
 import { useInvestigateFactStore } from "@/modules/11_discipline/store/InvestigateFactStore";
 import { useDisciplineMainStore } from "@/modules/11_discipline/store/Main";
 
-import type { FormData } from "@/modules/11_discipline/interface/request/InvestigateFact";
+import type { FormData } from "@/modules/11_discipline/interface/request/investigateFact";
 import type { OptionData } from "@/modules/07_insignia/interface/index/Main";
 
 import CalandarDialog from "@/modules/11_discipline/components/2_InvestigateFacts/CalandarDialog.vue";

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

@@ -15,7 +15,7 @@ import type {
   FormData,
   Director,
   PersonsArray,
-} from "@/modules/11_discipline/interface/request/Disciplinary";
+} from "@/modules/11_discipline/interface/request/disciplinary";
 import type {
   DataOption,
   FileLists,

src/modules/11_discipline/components/4_Result/DialogSendToCommand.vue

@@ -260,7 +260,7 @@ watch(
               keep-color
               color="primary"
               dense
-              :disable="commandType"
+              :disable="commandType === ''"
               v-model="scope.selected"
             />
           </template>
@@ -271,7 +271,7 @@ watch(
                   keep-color
                   color="primary"
                   dense
-                  :disable="commandType"
+                  :disable="commandType === ''"
                   v-model="props.selected"
                 />
               </q-td>

src/modules/11_discipline/components/4_Result/EditPage.vue

@@ -9,13 +9,13 @@ import { useCounterMixin } from "@/stores/mixin";
 import { useDisciplineResultStore } from "@/modules/11_discipline/store/ResultStore";
 import { useDisciplineMainStore } from "@/modules/11_discipline/store/Main";
 
-import type { DataListRow } from "@/modules/11_discipline/interface/request/Result";
+import type { DataListRow } from "@/modules/11_discipline/interface/request/result";
 import type {
   FormData as FormDataComplaint,
   ArrayPerson,
   ArrayFileList,
 } from "@/modules/11_discipline/interface/request/complaint";
-import type { FormData as FormInvestigateFact } from "@/modules/11_discipline/interface/request/InvestigateFact";
+import type { FormData as FormInvestigateFact } from "@/modules/11_discipline/interface/request/investigateFact";
 
 import DialogSendToCommand from "@/modules/11_discipline/components/4_Result/DialogSendToCommand.vue";
 import FormComplaints from "@/modules/11_discipline/components/1_Complaint/Form.vue"; //เรื่องร้องเรียน

src/modules/11_discipline/components/6_BasicInformation/Director/DialogInvestigateTotal.vue

@@ -98,7 +98,7 @@ watch(props, () => {
                       v-ripple
                       :active="listCheck === index"
                       active-class="my-menu-link"
-                      @click="clickList(index, item.director)"
+                      @click="clickList(Number(index), item.director)"
                     >
                       <q-item-section>{{ item.title }}</q-item-section>
                     </q-item>

src/modules/11_discipline/components/6_BasicInformation/Director/Form.vue

@@ -294,6 +294,7 @@ watch(
                   hide-bottom-space
                   dense
                   label="คำค้น"
+                  @keydown.enter.prevent="searchInput()"
                 >
                   <template v-slot:after>
                     <q-btn

src/modules/12_evaluatePersonal/components/Director/Form.vue

@@ -280,6 +280,7 @@ onMounted(async () => {
                   hide-bottom-space
                   dense
                   label="คำค้น"
+                  @keydown.enter.prevent="(pagination.page = 1), searchInput()"
                 >
                   <template v-slot:after>
                     <q-btn

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

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

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

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

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

@@ -905,6 +905,7 @@ onMounted(() => {
               hide-bottom-space
               dense
               label="คำค้น"
+              @keydown.enter.prevent="(formFilter.page = 1), fetchListPerson()"
             >
               <template v-slot:after>
                 <q-btn

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

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

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

@@ -777,7 +777,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/18_command/components/Step/Dialog1_AddOperetor.vue

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

src/modules/18_command/components/Step/View0_Digital.vue

@@ -719,6 +719,7 @@ onMounted(async () => {
                 dense
                 label="คำค้น"
                 @clear="search = ''"
+                @keydown.enter.prevent="onSearchData"
               />
             </div>
             <q-checkbox

src/modules/23_persons/components/TablePersons.vue

@@ -0,0 +1,306 @@
+<script setup lang="ts">
+import { onMounted, reactive, ref } from "vue";
+import { useQuasar } from "quasar";
+
+import http from "@/plugins/http";
+import config from "@/app.config";
+import { useCounterMixin } from "@/stores/mixin";
+import { usePersonsStore } from "@/modules/23_persons/stores/PersonsStore";
+import { usePagination } from "@/composables/usePagination";
+
+import type { QTableProps } from "quasar";
+import type {
+  DataOptions,
+  PosTypes,
+  PosLevels,
+  Person,
+} from "@/modules/23_persons/interface/Main";
+
+const $q = useQuasar();
+const { showLoader, hideLoader, messageError } = useCounterMixin();
+const { pagination, params, onRequest } = usePagination("", fetchData);
+const store = usePersonsStore();
+
+const props = defineProps<{ type: "current" | "draft" }>();
+
+const options = reactive({
+  posType: [] as DataOptions[],
+  posLevel: [] as DataOptions[],
+});
+
+const filters = reactive({
+  keyword: "",
+  position: "",
+  posTypeId: "",
+  posLevelId: "",
+});
+
+const rows = ref<Person[]>([]);
+const visibleColumns = ref<string[]>([
+  "citizenId",
+  "fullName",
+  "position",
+  "posType",
+  "posLevel",
+]);
+const columns = ref<QTableProps["columns"]>([
+  {
+    name: "citizenId",
+    align: "left",
+    label: "เลขบัตรประชาชน",
+    sortable: false,
+    field: "citizenId",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "fullName",
+    align: "left",
+    label: "ชื่อ-นามสกุล",
+    sortable: false,
+    field: "fullName",
+    format(val, row) {
+      return `${row.prefix || ""}${row.firstName || ""} ${
+        row.lastName || ""
+      }`.trim();
+    },
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "position",
+    align: "left",
+    label: "ตำแหน่งในสายงาน",
+    sortable: false,
+    field: "position",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "posType",
+    align: "left",
+    label: "ประเภทตำแหน่ง",
+    sortable: false,
+    field: "posType",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "posLevel",
+    align: "left",
+    label: "ระดับตำแหน่ง",
+    sortable: false,
+    field: "posLevel",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+]);
+
+/** ฟังก์ชันดึงข้อมูลรายชื่อขรก. ที่ไม่อยู่ในโครงสร้าง */
+async function fetchData() {
+  try {
+    showLoader();
+    const payload = {
+      ...params.value,
+      posTypeId: filters.posTypeId,
+      posLevelId: filters.posLevelId,
+      position: filters.position.trim(),
+      keyword: filters.keyword.trim(),
+    };
+    const endpoint =
+      props.type === "current"
+        ? config.API.orgSearchCurrentProfile
+        : config.API.orgSearchProfile;
+
+    const res = await http.post(endpoint, payload);
+    const result = res.data.result;
+
+    pagination.value.rowsNumber = result?.total || 0;
+    rows.value = result?.data || [];
+  } catch (error) {
+    messageError($q, error);
+  } finally {
+    hideLoader();
+  }
+}
+
+/** ฟังก์ชันดึงข้อมูลประเภทตำแหน่ง */
+async function getPosType() {
+  try {
+    options.posType = await store.fetchPosType();
+  } catch (error) {
+    messageError($q, error);
+  }
+}
+
+/**
+ * ฟังก์ชันอัปเดตตัวเลือกระดับตำแหน่งเมื่อเลือกประเภทตำแหน่ง
+ * @param val ID เภทตำแหน่ง
+ */
+function updateSelectType(val: string) {
+  const listLevel: PosTypes | undefined = store.optionsData.dataType.find(
+    (e: PosTypes) => e.id === val
+  );
+
+  store.optionsData.posLevel =
+    listLevel?.posLevels?.map((e: PosLevels) => ({
+      id: e.id,
+      name: e.posLevelName,
+    })) || [];
+
+  options.posLevel = store.optionsData.posLevel;
+
+  filters.posLevelId = "";
+  searchData();
+}
+
+/** ฟังก์ชันค้นหาข้อมูล*/
+function searchData() {
+  pagination.value.page = 1;
+  fetchData();
+}
+
+/**
+ * ฟังก์ชันเปิดหน้าทะเบียนขรก. ในแท็บใหม่
+ * @param personId ID ของขรก.
+ */
+function handleRedirect(personId: string) {
+  window.open(`/registry-officer/${personId}`, "_blank");
+}
+
+onMounted(() => {
+  fetchData();
+  getPosType();
+});
+</script>
+
+<template>
+  <div class="col-12">
+    <!-- Filter Section -->
+    <div class="row col-12 q-col-gutter-sm q-mb-sm">
+      <div class="col-xs-12 col-sm-6 col-md-2">
+        <q-input
+          v-model="filters.position"
+          dense
+          outlined
+          label="ตำแหน่งในสายงาน"
+          @keydown.enter.prevent="searchData"
+        />
+      </div>
+      <div class="col-xs-12 col-sm-6 col-md-2">
+        <q-select
+          label="ตำแหน่งประเภท"
+          v-model="filters.posTypeId"
+          :options="options.posType"
+          emit-value
+          dense
+          map-options
+          outlined
+          option-label="name"
+          option-value="id"
+          clearable
+          @clear="filters.posTypeId = ''"
+          @update:model-value="updateSelectType"
+        />
+      </div>
+      <div class="col-xs-12 col-sm-6 col-md-2">
+        <q-select
+          label="ระดับตำแหน่ง"
+          v-model="filters.posLevelId"
+          :disable="!filters.posTypeId"
+          :options="options.posLevel"
+          emit-value
+          dense
+          map-options
+          outlined
+          option-label="name"
+          option-value="id"
+          clearable
+          @clear="filters.posLevelId = ''"
+          @update:model-value="searchData"
+        />
+      </div>
+
+      <q-space />
+
+      <div class="col-xs-12 col-sm-6 col-md-2">
+        <q-input
+          v-model="filters.keyword"
+          dense
+          outlined
+          label="ค้นหาจากชื่อ-นามสกุล หรือเลขประจำตัวประชาชน"
+          @keydown.enter.prevent="searchData"
+        >
+          <template v-slot:append>
+            <q-icon name="search" class="cursor-pointer" @click="searchData" />
+          </template>
+        </q-input>
+      </div>
+      <div class="col-xs-12 col-sm-6 col-md-2">
+        <q-select
+          for="visibleColumns"
+          v-model="visibleColumns"
+          multiple
+          outlined
+          dense
+          options-dense
+          :display-value="$q.lang.table.columns"
+          emit-value
+          map-options
+          :options="columns"
+          option-value="name"
+        />
+      </div>
+    </div>
+
+    <!-- Table Section -->
+    <div class="col-12">
+      <p-table
+        ref="table"
+        :columns="columns"
+        :rows="rows"
+        row-key="id"
+        flat
+        bordered
+        dense
+        class="custom-header-table"
+        :visible-columns="visibleColumns"
+        :rows-per-page-options="[1, 10, 25, 50, 100]"
+        v-model:pagination="pagination"
+        @request="onRequest"
+      >
+        <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">
+          <q-tr :props="props">
+            <q-td auto-width>
+              <q-btn
+                flat
+                dense
+                round
+                color="info"
+                icon="mdi-eye"
+                @click.prevent="handleRedirect(props.row.id)"
+              >
+                <q-tooltip>ดูรายละเอียด</q-tooltip>
+              </q-btn>
+            </q-td>
+            <q-td v-for="col in props.cols" :key="col.name" :props="props">
+              <div>
+                {{ col.value ? col.value : "-" }}
+              </div>
+            </q-td>
+          </q-tr>
+        </template>
+      </p-table>
+    </div>
+  </div>
+</template>
+
+<style scoped></style>

src/modules/23_persons/interface/Main.ts

@@ -0,0 +1,38 @@
+interface DataOptions {
+  id: string;
+  name: string;
+}
+
+interface PosTypes {
+  createdAt: Date;
+  id: string;
+  lastUpdateFullName: string;
+  lastUpdatedAt: Date;
+  posTypeName: string;
+  posTypeRank: number;
+  posLevels: PosLevels[];
+}
+
+interface PosLevels {
+  createdAt: Date;
+  id: string;
+  lastUpdateFullName: string;
+  lastUpdatedAt: Date;
+  posLevelAuthority: string;
+  posLevelName: string;
+  posLevelRank: number;
+}
+
+interface Person {
+  citizenId: string;
+  firstName: string;
+  id: string;
+  lastName: string;
+  posLevel: string;
+  posType: string;
+  position: string;
+  prefix: string;
+  rank: string;
+}
+
+export type { DataOptions, PosTypes, PosLevels, Person };

src/modules/23_persons/router.ts

@@ -0,0 +1,14 @@
+const Main = () => import("@/modules/23_persons/views/Main.vue");
+
+export default [
+  {
+    path: "/persons",
+    name: "personsMain",
+    component: Main,
+    meta: {
+      Auth: true,
+      Key: "PERSONS",
+      Role: "PERSONS",
+    },
+  },
+];

src/modules/23_persons/stores/PersonsStore.ts

@@ -0,0 +1,45 @@
+import { defineStore } from "pinia";
+import { reactive } from "vue";
+
+import http from "@/plugins/http";
+import config from "@/app.config";
+
+import type {
+  DataOptions,
+  PosTypes,
+} from "@/modules/23_persons/interface/Main";
+
+export const usePersonsStore = defineStore("personsStore", () => {
+  const routeCheck = {
+    registry: {
+      meta: { Auth: true, Key: "SYS_REGISTRY_OFFICER", Role: "OWNER" },
+    },
+    org: {
+      meta: { Auth: true, Key: "SYS_ORG", Role: "OWNER" },
+    },
+  };
+
+  const optionsData = reactive({
+    posType: [] as DataOptions[],
+    posLevel: [] as DataOptions[],
+    dataType: [] as PosTypes[],
+  });
+
+  /** ฟังก์ชันดึงข้อมูลประเภทตำแหน่ง */
+  async function fetchPosType() {
+    if (optionsData.posType.length > 0) {
+      return optionsData.posType;
+    }
+
+    const res = await http.get(config.API.orgPosType);
+    optionsData.dataType = res.data.result;
+    optionsData.posType = res.data.result.map((e: PosTypes) => ({
+      id: e.id,
+      name: e.posTypeName,
+    }));
+
+    return optionsData.posType;
+  }
+
+  return { routeCheck, optionsData, fetchPosType };
+});

src/modules/23_persons/views/Main.vue

@@ -0,0 +1,77 @@
+<script setup lang="ts">
+import { watch, computed, ref } from "vue";
+
+import { useRouter } from "vue-router";
+import { usePersonsStore } from "@/modules/23_persons/stores/PersonsStore";
+import { checkPermission } from "@/utils/permissions";
+
+import TablePersons from "@/modules/23_persons/components/TablePersons.vue";
+
+const router = useRouter();
+const { routeCheck } = usePersonsStore();
+
+/// คำนวณสิทธิ์การเข้าถึงหน้ารายชื่อขรก. ที่ไม่อยู่ในโครงสร้าง
+const hasPermission = computed(() => {
+  const registryPermission = checkPermission(routeCheck.registry);
+  const orgPermission = checkPermission(routeCheck.org);
+
+  if (registryPermission === null || orgPermission === null) {
+    return null;
+  }
+
+  return (
+    registryPermission?.attrOwnership === "OWNER" &&
+    orgPermission?.attrOwnership === "OWNER"
+  );
+});
+
+const tabs = ref("1");
+
+watch(
+  () => hasPermission.value,
+  (allowed) => {
+    if (!allowed) {
+      router.push("/404");
+    }
+  }
+);
+</script>
+
+<template>
+  <div class="row items-center">
+    <div class="toptitle text-dark row items-center q-py-xs">
+      รายชื่อขรก. ที่ไม่อยู่ในโครงสร้าง
+    </div>
+  </div>
+
+  <q-card bordered flat>
+    <q-tabs
+      v-model="tabs"
+      dense
+      align="left"
+      inline-label
+      class="rounded-borders"
+      indicator-color="primary"
+      active-bg-color="teal-1"
+      active-class="text-primary"
+    >
+      <q-tab name="1" label="ปัจจุบัน" />
+      <q-tab name="2" label="แบบร่าง" />
+    </q-tabs>
+
+    <q-separator />
+    <div class="q-pa-sm">
+      <q-tab-panels v-model="tabs" animated>
+        <q-tab-panel name="1">
+          <TablePersons v-if="hasPermission" type="current" />
+        </q-tab-panel>
+
+        <q-tab-panel name="2">
+          <TablePersons v-if="hasPermission" type="draft" />
+        </q-tab-panel>
+      </q-tab-panels>
+    </div>
+  </q-card>
+</template>
+
+<style scoped></style>

src/router/index.ts

@@ -29,6 +29,7 @@ import ModulePositionCondition from "@/modules/19_condition/router";
 import ModulePositionTemp from "@/modules/20_positionTemp/router";
 import ModuleReport from "@/modules/21_report/router";
 import ModuleIssues from "@/modules/22_issues/router";
+import ModulePersons from "@/modules/23_persons/router";
 
 // TODO: ใช้หรือไม่?
 import { authenticated, logout } from "@/plugins/auth";
@@ -81,6 +82,7 @@ const router = createRouter({
         ...ModulePositionTemp,
         ...ModuleReport,
         ...ModuleIssues,
+        ...ModulePersons,
       ],
     },
     /**

src/stores/socket.ts

@@ -3,6 +3,7 @@ import { getToken } from "@/plugins/auth";
 import { defineStore } from "pinia";
 import { Notify } from "quasar";
 import { io, Socket } from "socket.io-client";
+import { ref } from "vue";
 interface sockeBackup {
   message: string;
   success?: boolean;
@@ -10,6 +11,7 @@ interface sockeBackup {
 
 export const useSocketStore = defineStore("socket", () => {
   let socket: Socket;
+  const notificationCounter = ref(0);
 
   async function init() {
     socket = io(new URL(config.API.socket).origin, {
@@ -43,6 +45,12 @@ export const useSocketStore = defineStore("socket", () => {
         notifyStatusOrg("current", body.message, body.success);
       }
     });
+
+    socket.on("socket-notification", (payload) => {
+      let body: sockeBackup = JSON.parse(payload);
+      notifyStatusWithProgress(body.message, body.success);
+      notificationCounter.value++;
+    });
   }
 
   function notifyStatus(message: string, success?: boolean) {
@@ -62,6 +70,27 @@ export const useSocketStore = defineStore("socket", () => {
     });
   }
 
+  function notifyStatusWithProgress(message: string, success?: boolean) {
+    Notify.create({
+      group: false,
+      type: success === undefined || success ? "positive" : "negative",
+      message: `${message}`,
+      position: "top",
+      timeout: success === undefined || success ? 3000 : 0,
+      actions:
+        success === undefined || success
+          ? []
+          : [
+              {
+                icon: "close",
+                color: "white",
+                round: true,
+              },
+            ],
+      progress: true,
+    });
+  }
+
   function fnStyleNotiOrg() {
     if (document.getElementById("notify-link-style")) return;
     const style = document.createElement("style");
@@ -84,10 +113,12 @@ export const useSocketStore = defineStore("socket", () => {
   `;
     document.head.appendChild(style);
   }
+
   (window as any).resetOrgPage = (type: string) => {
     localStorage.setItem("org_type", type);
     window.location.reload();
   };
+
   function notifyStatusOrg(type: string, message: string, success?: boolean) {
     fnStyleNotiOrg();
     Notify.create({
@@ -111,5 +142,5 @@ export const useSocketStore = defineStore("socket", () => {
 
   init();
 
-  return {};
+  return { notificationCounter };
 });

src/stores/uploadProgress.ts

@@ -0,0 +1,46 @@
+import { defineStore } from 'pinia';
+import { ref } from 'vue';
+
+interface PendingUpload {
+	jobId: string;
+	type: 'candidate' | 'score' | 'result' | 'period';
+	periodId: string;
+}
+
+export const useUploadProgressStore = defineStore('uploadProgress', () => {
+	const pendingUploads = ref<PendingUpload[]>([]);
+
+	function addUpload(jobId: string, periodId: string, uploadType: 'candidate' | 'score' | 'result' | 'period') {
+		pendingUploads.value.push({
+			jobId,
+			type: uploadType,
+			periodId
+		});
+	}
+
+	function removeUpload(jobId: string) {
+		const index = pendingUploads.value.findIndex(u => u.jobId === jobId);
+		if (index !== -1) {
+			pendingUploads.value.splice(index, 1);
+		}
+	}
+
+	function removeByPeriodAndType(periodId: string, uploadType: string) {
+		const index = pendingUploads.value.findIndex(
+			u => u.periodId === periodId && u.type === uploadType
+		);
+		if (index !== -1) {
+			pendingUploads.value.splice(index, 1);
+		}
+	}
+
+	function isUploading(periodId: string, uploadType: string): boolean {
+		return pendingUploads.value.some(
+			u => u.periodId === periodId && u.type === uploadType
+		);
+	}
+
+	return { pendingUploads, addUpload, removeUpload, removeByPeriodAndType, isUploading };
+}, {
+	persist: true
+});

src/views/MainLayout.vue

@@ -532,25 +532,29 @@ async function fetchKeycloakPosition() {
   await http
     .get(config.API.keycloakPosition())
     .then(async (res) => {
-      const data = await res.data.result;
+      const data = res.data.result;
       usePositionKeycloakStore().setPositionKeycloak(data);
       if (data.avatarName) {
-        await getImg(data.profileId, data.avatarName);
+        getImg(data.profileId, data.avatarName);
       } else {
         profileImg.value = avatar;
       }
     })
     .catch((err) => {
       messageError($q, err);
+      profileImg.value = avatar;
     });
 }
 
 const profileImg = ref<string>("");
-async function getImg(id: string, pathName: string) {
+function getImg(id: string, pathName: string) {
-  await http
+  http
     .get(config.API.fileByFile("ทะเบียนประวัติ", "โปรไฟล์", id, pathName))
     .then((res) => {
       profileImg.value = res.data.downloadUrl;
+    })
+    .catch((err) => {
+      profileImg.value = avatar;
     });
 }