From c94e3964fc36ecedcda563e759be0b3a7b487a4b Mon Sep 17 00:00:00 2001
From: "DESKTOP-1R2VSQH\\Lenovo ThinkPad E490" <nicey2t1096@gmail.com>
Date: Tue, 29 Jul 2025 15:14:23 +0700
Subject: [PATCH 1/2] =?UTF-8?q?=E0=B9=80=E0=B8=9E=E0=B8=B4=E0=B9=88?=
 =?UTF-8?q?=E0=B8=A1=20Skeleton=20popup=20info?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/SkeletonTable.vue              |  33 ++++++
 .../components/2_Manage/InfoAssessments.vue   |  27 +++--
 .../components/2_Manage/InfoInsignia.vue      |  38 +++---
 .../13_salary/components/DialogInfoMain.vue   | 108 +++++++++++-------
 .../13_salary/components/InfoDiscipline.vue   |  42 +++----
 .../13_salary/components/InfoLeave.vue        |  43 +++----
 .../13_salary/components/InfoSalary.vue       |  41 +++----
 7 files changed, 187 insertions(+), 145 deletions(-)
 create mode 100644 src/components/SkeletonTable.vue

diff --git a/src/components/SkeletonTable.vue b/src/components/SkeletonTable.vue
new file mode 100644
index 000000000..fbcf1c949
--- /dev/null
+++ b/src/components/SkeletonTable.vue
@@ -0,0 +1,33 @@
+<script setup lang="ts">
+import { computed } from "vue";
+
+/** importType*/
+import type { QTableProps } from "quasar";
+
+const columns = defineModel<QTableProps["columns"]>("columns", {
+  required: true,
+});
+
+/** จำนวนคอลัมน์ */
+const skeletonColumns = computed(() => columns.value?.length || 5);
+</script>
+
+<template>
+  <q-markup-table flat bordered>
+    <thead>
+      <tr>
+        <th v-for="(n, idx) in skeletonColumns" :key="idx" style="width: 150px">
+          <q-skeleton type="text" />
+        </th>
+      </tr>
+    </thead>
+
+    <tbody>
+      <tr v-for="n in 5" :key="n" :class="n % 2 === 0 ? 'bg-grey-2' : ''">
+        <td v-for="(col, idx) in skeletonColumns" :key="idx">
+          <q-skeleton type="text" width="80px" />
+        </td>
+      </tr>
+    </tbody>
+  </q-markup-table>
+</template>
diff --git a/src/modules/07_insignia/components/2_Manage/InfoAssessments.vue b/src/modules/07_insignia/components/2_Manage/InfoAssessments.vue
index e4dd6ba8f..715d0e88a 100644
--- a/src/modules/07_insignia/components/2_Manage/InfoAssessments.vue
+++ b/src/modules/07_insignia/components/2_Manage/InfoAssessments.vue
@@ -1,27 +1,30 @@
 <script setup lang="ts">
 import { ref, onMounted } from "vue";
+import { useQuasar } from "quasar";
+
 import http from "@/plugins/http";
 import config from "@/app.config";
-import { useQuasar } from "quasar";
+import { useResultsPerformDataStore } from "@/modules/04_registryPerson/stores/ResultsPerformance";
+import { useCounterMixin } from "@/stores/mixin";
 
 /** importType*/
 import type { QTableProps } from "quasar";
 import type { DataDiscipline } from "@/modules/13_salary/interface/response/Main";
 
-/** importStore*/
-import { useResultsPerformDataStore } from "@/modules/04_registryPerson/stores/ResultsPerformance";
-import { useCounterMixin } from "@/stores/mixin";
+/** importComponents*/
+import SkeletonTable from "@/components/SkeletonTable.vue";
 
 const $q = useQuasar();
 const store = useResultsPerformDataStore();
 const { textRangePoint, textPoint } = store;
-const { date2Thai, showLoader, hideLoader, messageError, onSearchDataTable } =
-  useCounterMixin();
+const { date2Thai, messageError, onSearchDataTable } = useCounterMixin();
 
 /**  props*/
 const profileId = defineModel<string>("profileId", { required: true });
 const employeeClass = defineModel<string>("employeeClass", { required: true });
 
+const isLoading = ref<boolean>(true);
+
 /** Table*/
 const keyword = ref<string>("");
 const rows = ref<DataDiscipline[]>([]);
@@ -131,7 +134,7 @@ const visibleColumns = ref<String[]>([
 
 /** function fetch รายการข้อมูลผลการประเมินการปฏิบัติราชการ*/
 function fetchListAssessments() {
-  showLoader();
+  isLoading.value = true;
   http
     .get(
       config.API.profileNewAssessmentsByProfileId(
@@ -140,14 +143,14 @@ function fetchListAssessments() {
       )
     )
     .then((res) => {
-      rows.value = res.data.result;
       rowsData.value = res.data.result;
+      onSearch();
     })
     .catch((err) => {
       messageError($q, err);
     })
     .finally(() => {
-      hideLoader();
+      isLoading.value = false;
     });
 }
 
@@ -195,8 +198,12 @@ onMounted(() => {
         style="min-width: 140px"
       />
     </div>
+
     <div class="col-12">
+      <SkeletonTable v-if="isLoading" :columns="columns" />
+
       <d-table
+        v-else
         ref="table"
         row-key="id"
         flat
@@ -228,5 +235,3 @@ onMounted(() => {
     </div>
   </q-card-section>
 </template>
-
-<style scoped></style>
diff --git a/src/modules/07_insignia/components/2_Manage/InfoInsignia.vue b/src/modules/07_insignia/components/2_Manage/InfoInsignia.vue
index 1980043e6..3330aea56 100644
--- a/src/modules/07_insignia/components/2_Manage/InfoInsignia.vue
+++ b/src/modules/07_insignia/components/2_Manage/InfoInsignia.vue
@@ -1,28 +1,27 @@
 <script setup lang="ts">
 import { ref, onMounted } from "vue";
-import http from "@/plugins/http";
-import config from "@/app.config";
 import { useQuasar } from "quasar";
 
-/**
- * importType
- */
+import http from "@/plugins/http";
+import config from "@/app.config";
+import { useCounterMixin } from "@/stores/mixin";
+
+/** importType*/
 import type { QTableProps } from "quasar";
 import type { DataDiscipline } from "@/modules/13_salary/interface/response/Main";
 
-/**
- * importStore
- */
-import { useCounterMixin } from "@/stores/mixin";
+/** importComponents*/
+import SkeletonTable from "@/components/SkeletonTable.vue";
 
 const $q = useQuasar();
-const { date2Thai, showLoader, hideLoader, messageError, onSearchDataTable } =
-  useCounterMixin();
+const { date2Thai, messageError, onSearchDataTable } = useCounterMixin();
 
 /** props*/
 const profileId = defineModel<string>("profileId", { required: true });
 const employeeClass = defineModel<string>("employeeClass", { required: true });
 
+const isLoading = ref<boolean>(true);
+
 /** Table*/
 const keyword = ref<string>("");
 const rows = ref<DataDiscipline[]>([]);
@@ -210,7 +209,6 @@ const insigniaData = ref<any[]>([]);
 
 /** fetch ข้อมูลรายการเครื่องราชอิสริยาภรณ์*/
 async function fetchListInsignia() {
-  showLoader();
   http
     .get(
       config.API.profileNewInsignByProfileId(
@@ -219,21 +217,18 @@ async function fetchListInsignia() {
       )
     )
     .then((res) => {
-      rows.value = res.data.result;
       rowsData.value = res.data.result;
+      onSearch();
     })
     .catch((err) => {
       messageError($q, err);
-    })
-    .finally(() => {
-      hideLoader();
     });
 }
 
 /** fetch ข้อมูลเครื่องราชอิสริยาภรณ์*/
 async function fetchInsignia() {
-  showLoader();
-  http
+  isLoading.value = true;
+  await http
     .get(config.API.insigniaOrg)
     .then(async (res) => {
       insigniaData.value = res.data.result;
@@ -243,9 +238,10 @@ async function fetchInsignia() {
       messageError($q, err);
     })
     .finally(() => {
-      hideLoader();
+      isLoading.value = false;
     });
 }
+
 function onSearch() {
   rows.value = onSearchDataTable(
     keyword.value,
@@ -290,8 +286,12 @@ onMounted(async () => {
         style="min-width: 140px"
       />
     </div>
+
     <div class="col-12">
+      <SkeletonTable v-if="isLoading" :columns="columns" />
+
       <d-table
+        v-else
         ref="table"
         row-key="id"
         flat
diff --git a/src/modules/13_salary/components/DialogInfoMain.vue b/src/modules/13_salary/components/DialogInfoMain.vue
index 45ba2ca75..b9f698fa1 100644
--- a/src/modules/13_salary/components/DialogInfoMain.vue
+++ b/src/modules/13_salary/components/DialogInfoMain.vue
@@ -6,27 +6,19 @@ import http from "@/plugins/http";
 import config from "@/app.config";
 import { checkPermissionGet } from "@/utils/permissions";
 import avatarMain from "@/assets/avatar_user.jpg";
+import { useCounterMixin } from "@/stores/mixin";
 
-/**
- * importCOmponents
- */
+/** importComponents */
 import InfoSalary from "@/modules/13_salary/components/InfoSalary.vue";
 import InfoDiscipline from "@/modules/13_salary/components/InfoDiscipline.vue";
 import InfoLeave from "@/modules/13_salary/components/InfoLeave.vue";
 import InfoAssessments from "@/modules/07_insignia/components/2_Manage/InfoAssessments.vue";
 import InfoInsignia from "@/modules/07_insignia/components/2_Manage/InfoInsignia.vue";
 
-/**
- * importStore
- */
-import { useCounterMixin } from "@/stores/mixin";
-
-/**
- * use
- */
+/** use */
 const $q = useQuasar();
 const router = useRouter();
-const { showLoader, hideLoader, messageError } = useCounterMixin();
+const { messageError } = useCounterMixin();
 
 /**
  *  props
@@ -44,11 +36,11 @@ const props = defineProps({
 const avatar = ref<string>("");
 const fullName = ref<string>("");
 const position = ref<string>("");
-const isSkeleton = ref<boolean>(false);
+const isLoading = ref<boolean>(true);
 
 /** function เรียกข้อมูลส่วนตัว*/
 function fetchInformation() {
-  isSkeleton.value = false;
+  isLoading.value = true;
   http
     .get(config.API.orgProfileById(profileId.value, props.employeeClass))
     .then(async (res) => {
@@ -65,7 +57,9 @@ function fetchInformation() {
     })
     .catch((err) => {
       messageError($q, err);
-      isSkeleton.value = true;
+    })
+    .finally(() => {
+      isLoading.value = false;
     });
 }
 
@@ -121,7 +115,33 @@ watch(
       </q-toolbar>
       <q-card-section class="col q-pt-none bg-grey-12" style="height: 100%">
         <div class="q-gutter-md">
-          <q-card bordered class="text-center bg-grey-12">
+          <div v-if="isLoading">
+            <q-skeleton
+              type="QAvatar"
+              size="120px"
+              style="background: #e3e3e3"
+              class="q-mx-auto q-mt-md"
+            />
+            <q-skeleton
+              type="text"
+              width="150px"
+              style="background: #e3e3e3"
+              class="q-mx-auto q-mt-md"
+            />
+            <q-skeleton
+              type="text"
+              width="100px"
+              style="background: #e3e3e3"
+              class="q-mx-auto q-mt-sm"
+            />
+            <q-skeleton
+              type="QBtn"
+              width="150px"
+              style="background: #e3e3e3"
+              class="q-mx-auto q-mt-sm"
+            />
+          </div>
+          <q-card v-else bordered class="text-center bg-grey-12">
             <div class="q-mt-md">
               <q-avatar size="120px" color="grey-4">
                 <img
@@ -191,39 +211,41 @@ watch(
                 </div>
               </q-card-section>
 
-              <q-scroll-area
+              <q-scroll-are
                 :thumb-style="thumbStyle"
                 style="height: 55vh; max-width: 100%"
               >
-                <InfoSalary
-                  v-if="type === 'posSalary'"
-                  v-model:profileId="profileId"
-                  :employeeClass="employeeClass"
-                />
-                <InfoDiscipline
-                  v-if="type === 'discipline'"
-                  v-model:profileId="profileId"
-                  :employeeClass="employeeClass"
-                />
+                <div style="min-width: 1200px; overflow-x: auto">
+                  <InfoSalary
+                    v-if="type === 'posSalary'"
+                    v-model:profileId="profileId"
+                    :employeeClass="employeeClass"
+                  />
+                  <InfoDiscipline
+                    v-if="type === 'discipline'"
+                    v-model:profileId="profileId"
+                    :employeeClass="employeeClass"
+                  />
 
-                <InfoLeave
-                  v-if="type === 'leave'"
-                  v-model:profileId="profileId"
-                  :employeeClass="employeeClass"
-                />
+                  <InfoLeave
+                    v-if="type === 'leave'"
+                    v-model:profileId="profileId"
+                    :employeeClass="employeeClass"
+                  />
 
-                <InfoAssessments
-                  v-if="type === 'assessments'"
-                  v-model:profileId="profileId"
-                  :employeeClass="employeeClass"
-                />
+                  <InfoAssessments
+                    v-if="type === 'assessments'"
+                    v-model:profileId="profileId"
+                    :employeeClass="employeeClass"
+                  />
 
-                <InfoInsignia
-                  v-if="type === 'insignia'"
-                  v-model:profileId="profileId"
-                  :employeeClass="employeeClass"
-                />
-              </q-scroll-area>
+                  <InfoInsignia
+                    v-if="type === 'insignia'"
+                    v-model:profileId="profileId"
+                    :employeeClass="employeeClass"
+                  />
+                </div>
+              </q-scroll-are>
             </q-card>
           </div>
         </div>
diff --git a/src/modules/13_salary/components/InfoDiscipline.vue b/src/modules/13_salary/components/InfoDiscipline.vue
index 943d4d547..24b5fff2b 100644
--- a/src/modules/13_salary/components/InfoDiscipline.vue
+++ b/src/modules/13_salary/components/InfoDiscipline.vue
@@ -1,33 +1,28 @@
 <script setup lang="ts">
 import { ref, onMounted } from "vue";
-import http from "@/plugins/http";
-import config from "@/app.config";
 import { useQuasar } from "quasar";
 
-/**
- * importType
- */
+import http from "@/plugins/http";
+import config from "@/app.config";
+import { useCounterMixin } from "@/stores/mixin";
+
+/** importType*/
 import type { QTableProps } from "quasar";
 import type { DataDiscipline } from "@/modules/13_salary/interface/response/Main";
 
-/**
- * importStore
- */
-import { useCounterMixin } from "@/stores/mixin";
+/** importComponents*/
+import SkeletonTable from "@/components/SkeletonTable.vue";
 
 const $q = useQuasar();
-const { date2Thai, showLoader, hideLoader, messageError,onSearchDataTable } = useCounterMixin();
-
-/**
- *  props
- */
+const { date2Thai, messageError, onSearchDataTable } = useCounterMixin();
 
+/**  props*/
 const profileId = defineModel<string>("profileId", { required: true });
 const employeeClass = defineModel<string>("employeeClass", { required: true });
 
-/**
- * Table
- */
+const isLoading = ref<boolean>(true);
+
+/** Table*/
 const keyword = ref<string>("");
 const rows = ref<DataDiscipline[]>([]);
 const rowsData = ref<DataDiscipline[]>([]);
@@ -98,22 +93,20 @@ const visibleColumns = ref<string[]>([
   "date",
 ]);
 
-/**
- * function fetch ข้อมูลวินัย
- */
+/** function fetch ข้อมูลวินัย*/
 function fetchListDiscipline() {
-  showLoader();
+  isLoading.value = true;
   http
     .get(config.API.disciplineListCard(profileId.value, employeeClass.value))
     .then((res) => {
-      rows.value = res.data.result;
       rowsData.value = res.data.result;
+      onSearch();
     })
     .catch((err) => {
       messageError($q, err);
     })
     .finally(() => {
-      hideLoader();
+      isLoading.value = false;
     });
 }
 
@@ -161,8 +154,11 @@ onMounted(() => {
         style="min-width: 140px"
       />
     </div>
+
     <div class="col-12">
+      <SkeletonTable v-if="isLoading" :columns="columns" />
       <d-table
+        v-else
         ref="table"
         row-key="id"
         flat
diff --git a/src/modules/13_salary/components/InfoLeave.vue b/src/modules/13_salary/components/InfoLeave.vue
index 735fa6158..4a2b2613e 100644
--- a/src/modules/13_salary/components/InfoLeave.vue
+++ b/src/modules/13_salary/components/InfoLeave.vue
@@ -1,34 +1,28 @@
 <script setup lang="ts">
 import { ref, onMounted } from "vue";
-import http from "@/plugins/http";
-import config from "@/app.config";
 import { useQuasar } from "quasar";
 
-/**
- * importType
- */
+import http from "@/plugins/http";
+import config from "@/app.config";
+import { useCounterMixin } from "@/stores/mixin";
+
+/** importType*/
 import type { QTableProps } from "quasar";
 import type { DataLeave } from "@/modules/13_salary/interface/response/Main";
 
-/**
- * importStore
- */
-import { useCounterMixin } from "@/stores/mixin";
+/** importComponents*/
+import SkeletonTable from "@/components/SkeletonTable.vue";
 
 const $q = useQuasar();
-const { date2Thai, showLoader, hideLoader, messageError, onSearchDataTable } =
-  useCounterMixin();
-
-/**
- *  props
- */
+const { date2Thai, messageError, onSearchDataTable } = useCounterMixin();
 
+/** props*/
 const profileId = defineModel<string>("profileId", { required: true });
 const employeeClass = defineModel<string>("employeeClass", { required: true });
 
-/**
- * Table
- */
+const isLoading = ref<boolean>(true);
+
+/** Table*/
 const keyword = ref<string>("");
 const rows = ref<DataLeave[]>([]);
 const rowsData = ref<DataLeave[]>([]);
@@ -104,22 +98,20 @@ const visibleColumns = ref<string[]>([
   "reason",
 ]);
 
-/**
- * function fetch ข้อมูลการลา
- */
+/** function fetch ข้อมูลการลา*/
 function fetchListSalary() {
-  showLoader();
+  isLoading.value = true;
   http
     .get(config.API.leaveListCard(profileId.value, employeeClass.value))
     .then((res) => {
-      rows.value = res.data.result;
       rowsData.value = res.data.result;
+      onSearch();
     })
     .catch((e) => {
       messageError($q, e);
     })
     .finally(() => {
-      hideLoader();
+      isLoading.value = false;
     });
 }
 
@@ -196,7 +188,10 @@ onMounted(() => {
       />
     </div>
     <div class="col-12">
+      <SkeletonTable v-if="isLoading" :columns="columns" />
+
       <d-table
+        v-else
         ref="table"
         row-key="id"
         flat
diff --git a/src/modules/13_salary/components/InfoSalary.vue b/src/modules/13_salary/components/InfoSalary.vue
index 4984ccf19..1037fd357 100644
--- a/src/modules/13_salary/components/InfoSalary.vue
+++ b/src/modules/13_salary/components/InfoSalary.vue
@@ -1,48 +1,38 @@
 <script setup lang="ts">
 import { ref, onMounted, computed } from "vue";
+import { is, useQuasar } from "quasar";
+
 import http from "@/plugins/http";
 import config from "@/app.config";
-import { useQuasar } from "quasar";
-import type { QTableColumn } from "quasar";
+import { useCounterMixin } from "@/stores/mixin";
 
-/**
- * importType
- */
-import type { QTableProps } from "quasar";
+/** importType*/
+import type { QTableColumn } from "quasar";
 import type { DataPosSalary } from "@/modules/13_salary/interface/response/Main";
 import type { ResListSalary } from "@/modules/04_registryPerson/interface/response/Salary";
 
-/**
- * importStore
- */
-import { useCounterMixin } from "@/stores/mixin";
+import SkeletonTable from "@/components/SkeletonTable.vue";
 import DialogPreviewCommand from "@/modules/18_command/components/DialogPreviewCommand.vue";
 
 const $q = useQuasar();
 const {
   date2Thai,
-  showLoader,
-  hideLoader,
   messageError,
   onSearchDataTable,
   findOrgName,
   findOrgNameHtml,
 } = useCounterMixin();
 
-/**
- *  props
- */
-
+/** props*/
 const profileId = defineModel<string>("profileId", { required: true });
 const employeeClass = defineModel<string>("employeeClass", { required: true });
 
-/**
- * Table
- */
 const modalCommand = ref<boolean>(false);
 const command = ref<string>("");
 const commandId = ref<string>("");
+const isLoading = ref<boolean>(true);
 
+/** Table*/
 const keyword = ref<string>("");
 const rows = ref<DataPosSalary[]>([]);
 const rowsData = ref<DataPosSalary[]>([]);
@@ -343,22 +333,20 @@ const visibleColumns = ref<string[]>([
   "lastUpdatedAt",
 ]);
 
-/**
- * function fetch ข้อมูลเงินเดือน / ค่าจ้าง
- */
+/** function fetch ข้อมูลเงินเดือน / ค่าจ้าง */
 function fetchListSalary() {
-  showLoader();
+  isLoading.value = true;
   http
     .get(config.API.salaryListCard(profileId.value, employeeClass.value))
     .then((res) => {
-      rows.value = res.data.result;
       rowsData.value = res.data.result;
+      onSearch();
     })
     .catch((err) => {
       messageError($q, err);
     })
     .finally(() => {
-      hideLoader();
+      isLoading.value = false;
     });
 }
 
@@ -413,7 +401,10 @@ onMounted(() => {
       />
     </div>
     <div class="col-12">
+      <SkeletonTable v-if="isLoading" :columns="columns" />
+
       <d-table
+        v-else
         ref="table"
         row-key="id"
         flat

From 27bb2419cea8abc284358f596c87cefd72b33bde Mon Sep 17 00:00:00 2001
From: "DESKTOP-1R2VSQH\\Lenovo ThinkPad E490" <nicey2t1096@gmail.com>
Date: Tue, 29 Jul 2025 16:03:32 +0700
Subject: [PATCH 2/2] =?UTF-8?q?fix=20=3D=3D=3D>=20=E0=B9=81=E0=B8=81?=
 =?UTF-8?q?=E0=B9=89=E0=B9=84=E0=B8=82=E0=B8=81=E0=B8=B2=E0=B8=A3=E0=B9=81?=
 =?UTF-8?q?=E0=B8=AA=E0=B8=94=E0=B8=87=E0=B8=9C=E0=B8=A5=E0=B8=95=E0=B8=B2?=
 =?UTF-8?q?=E0=B8=A3=E0=B8=B2=E0=B8=87=E0=B8=AA=E0=B8=A3=E0=B9=89=E0=B8=B2?=
 =?UTF-8?q?=E0=B8=87=E0=B8=84=E0=B8=B3=E0=B8=AA=E0=B8=B1=E0=B9=88=E0=B8=87?=
 =?UTF-8?q?=E0=B8=82=E0=B8=AD=E0=B8=87=E0=B8=A3=E0=B8=B1=E0=B8=81=E0=B8=A9?=
 =?UTF-8?q?=E0=B8=B2=E0=B8=81=E0=B8=B2=E0=B8=A3=E0=B9=83=E0=B8=99=E0=B8=95?=
 =?UTF-8?q?=E0=B8=B3=E0=B9=81=E0=B8=AB=E0=B8=99=E0=B9=88=E0=B8=87?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/DialogCreateCommandORG.vue     | 68 ++++++++++++++++---
 1 file changed, 58 insertions(+), 10 deletions(-)

diff --git a/src/modules/18_command/components/DialogCreateCommandORG.vue b/src/modules/18_command/components/DialogCreateCommandORG.vue
index c9f467d21..fcad53fec 100644
--- a/src/modules/18_command/components/DialogCreateCommandORG.vue
+++ b/src/modules/18_command/components/DialogCreateCommandORG.vue
@@ -10,6 +10,7 @@ import { useCommandMainStore } from "@/modules/18_command/store/Main";
 
 /** importType*/
 import type { QTableProps } from "quasar";
+import type { QTableColumn } from "quasar";
 import type {
   ListCommand,
   DataOption,
@@ -94,7 +95,7 @@ const dataMapToSend = computed(() => {
 //Table
 const rows = ref<any[]>([]);
 const selected = ref<any[]>([]);
-const columns = ref<QTableProps["columns"]>([
+const baseColumns = ref<QTableColumn[]>([
   {
     name: "posMasterNo",
     align: "left",
@@ -116,7 +117,7 @@ const columns = ref<QTableProps["columns"]>([
   {
     name: "posType",
     align: "left",
-    label: "ประเภทตำแหน่ง",
+    label: "ตำแหน่งประเภท",
     sortable: false,
     field: "posType",
     headerStyle: "font-size: 14px",
@@ -141,6 +142,44 @@ const columns = ref<QTableProps["columns"]>([
     style: "font-size: 14px",
   },
 ]);
+const baseColumnsActing = ref<QTableColumn[]>([
+  {
+    name: "posMasterNo",
+    align: "left",
+    label: "รักษาการตำแหน่งเลขที่",
+    sortable: false,
+    field: "posMasterNo",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "positionIsSelected",
+    align: "left",
+    label: "ชื่อ-นามสกุล",
+    sortable: false,
+    field: "positionIsSelected",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "positionName",
+    align: "left",
+    label: "ตำแหน่งในสายงาน",
+    field: "positionName",
+    format(val, row) {
+      return `${val}${row.posLevel}`;
+    },
+    sortable: false,
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+]);
+
+const columns = computed((): QTableColumn[] => {
+  return props.commandTypeCode !== "C-PM-40"
+    ? baseColumns.value
+    : baseColumnsActing.value;
+});
 
 /** ฟังก์ชันบันทึกและไปยังหน้าคำสั่ง*/
 function onSubmit() {
@@ -218,9 +257,7 @@ function filterOption(val: string, update: Function) {
   });
 }
 
-/**
- * ฟังก์ชันเลือกประเภทคำสั่งและเลือกกลุ่ม
- */
+/** ฟังก์ชันเลือกประเภทคำสั่งและเลือกกลุ่ม */
 function updateValue() {
   if (props.systemName === "SALARY" || props.systemName === "SALARY_EMP") {
     const code = commandOp.value.find(
@@ -268,6 +305,20 @@ function getPerson() {
     });
 }
 
+/**
+ * ฟังก์ชันแสดงตำแหน่งเลขที่
+ * @param row ข้อมูลแถว
+ * @param colValue ค่าของคอลัมน์
+ * @returns ข้อความที่จะแสดง
+ */
+function posMasterNoDisplay(row: any, colValue: string): string {
+  if (props.commandTypeCode === "C-PM-40") {
+    return row.posMasterNoAct;
+  }
+
+  return row.isSit ? `${colValue}(นั่งทับตำแหน่ง)` : colValue;
+}
+
 watch(modal, async () => {
   if (modal.value) {
     groupOp.value = groupDataMain.value;
@@ -557,12 +608,9 @@ watch(modal, async () => {
                       :props="props"
                     >
                       <div v-if="col.name === 'posMasterNo'">
-                        {{
-                          props.row.isSit
-                            ? col.value + " " + "(นั่งทับตำแหน่ง)"
-                            : col.value
-                        }}
+                        {{ posMasterNoDisplay(props.row, col.value) }}
                       </div>
+
                       <div v-else-if="col.name === 'posLevelName'">
                         {{
                           props.row.posLevelName