diff --git a/src/modules/04_registryPerson/components/detail/Salary/01_PositionSalary.vue b/src/modules/04_registryPerson/components/detail/Salary/01_PositionSalary.vue
index 4582b2920..06bb7eea1 100644
--- a/src/modules/04_registryPerson/components/detail/Salary/01_PositionSalary.vue
+++ b/src/modules/04_registryPerson/components/detail/Salary/01_PositionSalary.vue
@@ -7,7 +7,7 @@ import { useRoute } from "vue-router";
 import http from "@/plugins/http";
 import config from "@/app.config";
 
-import type { QTableProps } from "quasar";
+import type { QTableColumn } from "quasar";
 import type {
   DataPositions,
   DataCommandCode,
@@ -21,7 +21,9 @@ import type { FormSalary } from "@/modules/04_registryPerson/interface/request/S
 import type { ResListSalary } from "@/modules/04_registryPerson/interface/response/Salary";
 
 import DialogHeader from "@/components/DialogHeader.vue";
-import DialogHistory from "@/modules/04_registryPerson/components/detail/Salary/01_PositionSalaryHistory.vue";
+import DialogHistory from "@/modules/04_registryPerson/components/detail/DialogHistory.vue";
+
+// import DialogHistory from "@/modules/04_registryPerson/components/detail/Salary/01_PositionSalaryHistory.vue";
 
 import { useCounterMixin } from "@/stores/mixin";
 import { useSalaryDataStore } from "@/modules/04_registryPerson/stores/salary";
@@ -61,7 +63,7 @@ const keyword = ref<string>(""); //คำค้นหา
 const modalCommand = ref<boolean>(false);
 const command = ref<string>("");
 const commandId = ref<string>("");
-const baseColumns = ref<QTableProps["columns"]>([
+const baseColumns = ref<QTableColumn[]>([
   {
     name: "commandDateAffect",
     align: "left",
@@ -281,20 +283,35 @@ const baseColumns = ref<QTableProps["columns"]>([
         .toString()
         .localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
   },
+  {
+    name: "lastUpdateFullName",
+    align: "left",
+    label: "ผู้ดำเนินการ",
+    sortable: true,
+    field: "lastUpdateFullName",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a
+        .toString()
+        .localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "lastUpdatedAt",
+    align: "left",
+    label: "วันที่แก้ไข",
+    sortable: true,
+    field: "lastUpdatedAt",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    format: (v) => date2Thai(v, false, true),
+    sort: (a: string, b: string) =>
+      a
+        .toString()
+        .localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
 ]);
-const columns = computed(() => {
-  if (empType.value === "-employee") {
-    if (baseColumns.value) {
-      return baseColumns.value.filter(
-        (column) =>
-          column.name !== "positionSalaryAmount" &&
-          column.name !== "mouthSalaryAmount"
-      );
-    }
-  }
-  return baseColumns.value;
-});
-const visibleColumns = ref<string[]>([
+const baseVisibleColumns = ref<string[]>([
   "commandDateAffect",
   "posNo",
   "positionName",
@@ -309,11 +326,47 @@ const visibleColumns = ref<string[]>([
   "commandDateSign",
   "organization",
   "remark",
+  "lastUpdateFullName",
+  "lastUpdatedAt",
 ]);
+
+const columns = computed<QTableColumn[]>(() => {
+  if (empType.value === "-employee") {
+    if (baseColumns.value) {
+      return baseColumns.value.filter(
+        (column) =>
+          column.name !== "positionSalaryAmount" &&
+          column.name !== "mouthSalaryAmount"
+      );
+    }
+  }
+  return baseColumns.value.filter(
+    (e: any) => e.name !== "lastUpdateFullName" && e.name !== "lastUpdatedAd"
+  );
+});
+const visibleColumns = ref<string[]>(
+  baseVisibleColumns.value.filter(
+    (e: string) => e !== "lastUpdateFullName" && e !== "lastUpdatedAd"
+  )
+);
 const pagination = ref({
   sortBy: "",
 });
 
+const columnsHistory = computed<QTableColumn[]>(() => {
+  if (empType.value === "-employee") {
+    if (baseColumns.value) {
+      return baseColumns.value.filter(
+        (column) =>
+          column.name !== "positionSalaryAmount" &&
+          column.name !== "mouthSalaryAmount"
+      );
+    }
+  }
+  return baseColumns.value;
+});
+const visibleColumnsHistory = ref<string[]>(baseVisibleColumns.value);
+
 const formData = reactive<FormSalary>({
   commandCode: "", //ประเภทคำสั่ง
   commandNo: "", //เลขที่คำสั่ง
@@ -698,6 +751,22 @@ function onClikcHistory(id: string) {
   modalHistory.value = true;
 }
 
+/** function fetch ข้อมูลประวัติการแก้ไข*/
+async function fetchDataHistory() {
+  showLoader();
+  try {
+    const res = await http.get(
+      config.API.profileListSalaryHistoryNew(salaryId.value, empType.value)
+    );
+
+    return res.data.result;
+  } catch (err) {
+    messageError($q, err);
+  } finally {
+    hideLoader();
+  }
+}
+
 const classInput = (val: boolean) => {
   return {
     "full-width inputgreen cursor-pointer": val,
@@ -1419,7 +1488,16 @@ onMounted(async () => {
     </q-card>
   </q-dialog>
 
-  <DialogHistory v-model:modal="modalHistory" v-model:salaryId="salaryId" />
+  <!-- <DialogHistory v-model:modal="modalHistory" v-model:salaryId="salaryId" /> -->
+
+  <DialogHistory
+    v-model:modal="modalHistory"
+    :visible-columns="visibleColumnsHistory"
+    :title="`ประวัติแก้ไขเงินเดือน`"
+    :columns="columnsHistory"
+    :fetch-data="fetchDataHistory"
+  />
+
   <DialogPreviewCommand
     v-model:modal="modalCommand"
     v-model:command="command"
diff --git a/src/modules/04_registryPerson/components/detail/Salary/01_PositionSalaryHistory.vue b/src/modules/04_registryPerson/components/detail/Salary/01_PositionSalaryHistory.vue
deleted file mode 100644
index 37a31a381..000000000
--- a/src/modules/04_registryPerson/components/detail/Salary/01_PositionSalaryHistory.vue
+++ /dev/null
@@ -1,436 +0,0 @@
-<script setup lang="ts">
-import { ref, watch, computed } from "vue";
-import { useQuasar } from "quasar";
-
-import { useRoute } from "vue-router";
-import { useCounterMixin } from "@/stores/mixin";
-import { useSalaryDataStore } from "@/modules/04_registryPerson/stores/salary";
-
-import http from "@/plugins/http";
-import config from "@/app.config";
-
-import type { QTableProps } from "quasar";
-import type { ResListSalary } from "@/modules/04_registryPerson/interface/response/Salary";
-
-import DialogHeader from "@/components/DialogHeader.vue";
-
-const $q = useQuasar();
-const route = useRoute();
-const store = useSalaryDataStore();
-const {
-  date2Thai,
-  showLoader,
-  hideLoader,
-  messageError,
-  pathRegistryEmp,
-  onSearchDataTable,
-  findOrgName,
-} = useCounterMixin();
-
-/** props*/
-const modal = defineModel<boolean>("modal", { required: true });
-const salaryId = defineModel<string>("salaryId", { required: true });
-
-const empType = ref<string>(pathRegistryEmp(route.name?.toString() ?? ""));
-
-const rows = ref<ResListSalary[]>([]); //รายการข้อมูลประวัติการแก้ไข
-const rowsMain = ref<ResListSalary[]>([]); //รายการข้อมูลประวัติการแก้ไข
-const keyword = ref<string>(""); //คำค้นหา
-const baseColumns = ref<QTableProps["columns"]>([
-  {
-    name: "commandDateAffect",
-    align: "left",
-    label: "วันที่คำสั่งมีผล",
-    sortable: true,
-    field: "commandDateAffect",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-    format: (v) => date2Thai(v),
-    sort: (a: string, b: string) =>
-      a
-        .toString()
-        .localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
-  },
-  {
-    name: "posNo",
-    align: "left",
-    label: "ตำแหน่งเลขที่",
-    sortable: true,
-    field: "posNo",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-    format(val, row) {
-      return row.posNoAbb && row.posNo
-        ? `${row.posNoAbb}${row.posNo}`
-        : row.posNo
-        ? row.posNo
-        : "-";
-    },
-    sort: (a: string, b: string) =>
-      a
-        .toString()
-        .localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
-  },
-  {
-    name: "positionName",
-    align: "left",
-    label: empType.value === "-employee" ? "ตำแหน่ง" : "ตำแหน่งในสายงาน",
-    sortable: true,
-    field: "positionName",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-    sort: (a: string, b: string) =>
-      a
-        .toString()
-        .localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
-  },
-  {
-    name: "positionType",
-    align: "left",
-    label: empType.value === "-employee" ? "กลุ่มงาน" : "ประเภทตำแหน่ง",
-    sortable: true,
-    field: "positionType",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-    sort: (a: string, b: string) =>
-      a
-        .toString()
-        .localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
-  },
-  {
-    name: "positionLevel",
-    align: "left",
-    label: empType.value === "-employee" ? "ระดับชั้นงาน" : "ระดับ",
-    sortable: true,
-    field: "positionLevel",
-    format(val, row) {
-      return `${
-        row.positionLevel
-          ? row.positionLevel
-          : row.positionCee
-          ? row.positionCee
-          : "-"
-      }`;
-    },
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-    sort: (a: string, b: string) =>
-      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
-  },
-  {
-    name: "positionExecutive",
-    align: "left",
-    label: "ตำแหน่งทางการบริหาร",
-    sortable: true,
-    field: "positionExecutive",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-    sort: (a: string, b: string) =>
-      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
-  },
-  {
-    name: "amount",
-    align: "left",
-    label: empType.value === "-employee" ? "ค่าตอบแทนรายเดือน" : "เงินเดือน",
-    sortable: true,
-    field: "amount",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-    format(v, row) {
-      return row.amount
-        ? `${row.amount.toLocaleString()}${
-            row.amountSpecial !== 0 && row.amountSpecial
-              ? ` (${row.amountSpecial.toLocaleString()})`
-              : ""
-          }`
-        : "-";
-    },
-    sort: (a: string, b: string) =>
-      a
-        .toString()
-        .localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
-  },
-  {
-    name: "positionSalaryAmount",
-    align: "left",
-    label: "เงินประจำตำแหน่ง",
-    sortable: true,
-    field: "positionSalaryAmount",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-    format: (v) => Number(v).toLocaleString(),
-    sort: (a: string, b: string) =>
-      a
-        .toString()
-        .localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
-  },
-  {
-    name: "mouthSalaryAmount",
-    align: "left",
-    label: "เงินค่าตอบแทนรายเดือน",
-    sortable: true,
-    field: "mouthSalaryAmount",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-    format: (v) => Number(v).toLocaleString(),
-    sort: (a: string, b: string) =>
-      a
-        .toString()
-        .localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
-  },
-  {
-    name: "commandNo",
-    align: "left",
-    label: "เลขที่คำสั่ง",
-    sortable: true,
-    field: "commandNo",
-    format(val, row) {
-      return row.commandNo && row.commandYear
-        ? `${row.commandNo}/${row.commandYear}`
-        : "";
-    },
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-    sort: (a: string, b: string) =>
-      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
-  },
-  {
-    name: "commandCode",
-    align: "left",
-    label: "ประเภทคำสั่ง",
-    sortable: true,
-    field: "commandCode",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-    format(val, row) {
-      return store.convertCommandCodeName(val);
-    },
-
-    sort: (a: string, b: string) =>
-      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
-  },
-  {
-    name: "commandDateSign",
-    align: "left",
-    label: "วันที่ลงนาม",
-    sortable: true,
-    field: "commandDateSign",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-    format: (v) => date2Thai(v),
-    sort: (a: string, b: string) =>
-      a
-        .toString()
-        .localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
-  },
-  {
-    name: "organization",
-    align: "left",
-    label: "สังกัด",
-    sortable: true,
-    field: "organization",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-    format(val, row) {
-      return findOrgName({
-        root: row.orgRoot,
-        child1: row.orgChild1,
-        child2: row.orgChild2,
-        child3: row.orgChild3,
-        child4: row.orgChild4,
-      });
-    },
-    sort: (a: string, b: string) =>
-      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
-  },
-  {
-    name: "remark",
-    align: "left",
-    label: "หมายเหตุ",
-    sortable: true,
-    field: "remark",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-    sort: (a: string, b: string) =>
-      a
-        .toString()
-        .localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
-  },
-  {
-    name: "lastUpdateFullName",
-    align: "left",
-    label: "ผู้ดำเนินการ",
-    sortable: true,
-    field: "lastUpdateFullName",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-    sort: (a: string, b: string) =>
-      a
-        .toString()
-        .localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
-  },
-  {
-    name: "lastUpdatedAt",
-    align: "left",
-    label: "วันที่แก้ไข",
-    sortable: true,
-    field: "lastUpdatedAt",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-    format: (v) => date2Thai(v, false, true),
-    sort: (a: string, b: string) =>
-      a
-        .toString()
-        .localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
-  },
-]);
-const visibleColumns = ref<string[]>([
-  "commandDateAffect",
-  "posNo",
-  "positionName",
-  "positionType",
-  "positionLevel",
-  "positionExecutive",
-  "amount",
-  "positionSalaryAmount",
-  "mouthSalaryAmount",
-  "commandNo",
-  "commandCode",
-  "commandDateSign",
-  "organization",
-  "remark",
-  "lastUpdateFullName",
-  "lastUpdatedAt",
-]);
-const columns = computed(() => {
-  if (empType.value === "-employee") {
-    if (baseColumns.value) {
-      return baseColumns.value.filter(
-        (column) =>
-          column.name !== "positionSalaryAmount" &&
-          column.name !== "mouthSalaryAmount"
-      );
-    }
-  }
-  return baseColumns.value;
-});
-const pagination = ref({
-  sortBy: "lastUpdatedAt",
-});
-
-/** function fetch ข้อมูลประวัติการแก้ไข*/
-function fetchListHistory() {
-  showLoader();
-  http
-    .get(config.API.profileListSalaryHistoryNew(salaryId.value, empType.value))
-    .then((res) => {
-      rows.value = res.data.result;
-      rowsMain.value = res.data.result;
-    })
-    .catch((err) => {
-      messageError($q, err);
-    })
-    .finally(() => {
-      hideLoader();
-    });
-}
-
-/** ฟังก์ชันปิด Popup*/
-function closeDialog() {
-  modal.value = false;
-  keyword.value = "";
-  rows.value = [];
-}
-
-/** ฟังก์ค้นหาข้อมูลรายการวินัย */
-function serchDataTable() {
-  rows.value = onSearchDataTable(
-    keyword.value,
-    rowsMain.value,
-    columns.value ? columns.value : []
-  );
-}
-
-/**
- * ดูการเปลี่ยนแปลงของ modal
- * ถ้า modal เป็น true  เรียก getHistory เพิ่อดึงข้อมูลประวัติการแก้ไข
- */
-watch(
-  () => modal.value,
-  () => {
-    modal.value && fetchListHistory();
-  }
-);
-</script>
-<template>
-  <q-dialog v-model="modal" persistent>
-    <q-card style="min-width: 80%">
-      <DialogHeader
-        :tittle="'ประวัติแก้ไขตำแหน่ง/เงินเดือน'"
-        :close="closeDialog"
-      />
-      <q-separator color="grey-4" />
-      <q-card-section style="max-height: 60vh" class="scroll">
-        <div class="row q-gutter-sm q-mb-sm">
-          <q-space />
-          <q-input
-            dense
-            outlined
-            v-model="keyword"
-            label="ค้นหา"
-            class="q-mr-sm"
-            @keydown.enter.pervent="serchDataTable"
-          >
-            <template v-slot:append>
-              <q-icon name="search" />
-            </template>
-          </q-input>
-
-          <q-select
-            v-model="visibleColumns"
-            multiple
-            outlined
-            dense
-            options-dense
-            :display-value="$q.lang.table.columns"
-            emit-value
-            map-options
-            :options="columns"
-            option-value="name"
-            style="min-width: 140px"
-          />
-        </div>
-        <d-table
-          ref="table"
-          row-key="id"
-          flat
-          bordered
-          dense
-          :columns="columns"
-          :rows="rows"
-          v-model:pagination="pagination"
-          :visible-columns="visibleColumns"
-        >
-          <template v-slot:header="props">
-            <q-tr :props="props">
-              <q-th v-for="col in props.cols" :key="col.name" :props="props">
-                <span class="text-weight-medium">{{ col.label }}</span>
-              </q-th>
-            </q-tr>
-          </template>
-          <template v-slot:body="props">
-            <q-tr :props="props">
-              <q-td v-for="col in props.cols">
-                <div class="table_ellipsis">
-                  {{ col.value ? col.value : "-" }}
-                </div>
-              </q-td>
-            </q-tr>
-          </template>
-        </d-table>
-      </q-card-section>
-    </q-card>
-  </q-dialog>
-</template>
-
-<style scoped></style>