From d983e0b89e7d029a3015a2fdecb2aeff5666b97e Mon Sep 17 00:00:00 2001
From: "DESKTOP-1R2VSQH\\Lenovo ThinkPad E490" <nicey2t1096@gmail.com>
Date: Thu, 20 Mar 2025 18:16:01 +0700
Subject: [PATCH 1/3] =?UTF-8?q?=E0=B8=A3=E0=B8=B2=E0=B8=A2=E0=B8=81?=
 =?UTF-8?q?=E0=B8=B2=E0=B8=A3=20=E0=B9=81=E0=B8=81=E0=B9=89=E0=B9=84?=
 =?UTF-8?q?=E0=B8=82=E0=B8=97=E0=B8=B0=E0=B9=80=E0=B8=9A=E0=B8=B5=E0=B8=A2?=
 =?UTF-8?q?=E0=B8=99=E0=B8=9B=E0=B8=A3=E0=B8=B0=E0=B8=A7=E0=B8=B1=E0=B8=95?=
 =?UTF-8?q?=E0=B8=B4=20=E0=B8=95=E0=B8=B3=E0=B9=81=E0=B8=AB=E0=B8=99?=
 =?UTF-8?q?=E0=B9=88=E0=B8=87/=E0=B9=80=E0=B8=87=E0=B8=B4=E0=B8=99?=
 =?UTF-8?q?=E0=B9=80=E0=B8=94=E0=B8=B7=E0=B8=AD=E0=B8=99?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/02_organizational/api.organization.ts |   5 +
 src/modules/04_registryPerson/router.ts       |   2 +-
 src/modules/04_registryPerson/stores/Edit.ts  |  39 +
 .../views/edit/components/DialogForm.vue      | 473 +++++++++++++
 .../views/edit/components/FormPosition.vue    | 669 ++++++++++++++++++
 .../views/edit/components/Table.vue           | 524 ++++++++++++++
 .../04_registryPerson/views/edit/list.vue     | 464 +++++++++++-
 .../04_registryPerson/views/edit/salary.vue   | 225 +++++-
 8 files changed, 2373 insertions(+), 28 deletions(-)
 create mode 100644 src/modules/04_registryPerson/stores/Edit.ts
 create mode 100644 src/modules/04_registryPerson/views/edit/components/DialogForm.vue
 create mode 100644 src/modules/04_registryPerson/views/edit/components/FormPosition.vue
 create mode 100644 src/modules/04_registryPerson/views/edit/components/Table.vue

diff --git a/src/api/02_organizational/api.organization.ts b/src/api/02_organizational/api.organization.ts
index 76c37250e..41ebc7af1 100644
--- a/src/api/02_organizational/api.organization.ts
+++ b/src/api/02_organizational/api.organization.ts
@@ -178,4 +178,9 @@ export default {
   keycloakLogSSO: `${organization}/keycloak/log/sso`,
 
   reportOrgByType: (type: string) => `${reportOrg}/registry-${type}`,
+
+  //EditPage
+  salaryTemp: `${orgProfile}/salaryTemp`,
+  profileidPosition: (type: string) =>
+    `${orgProfile}${type}/profileid/position`,
 };
diff --git a/src/modules/04_registryPerson/router.ts b/src/modules/04_registryPerson/router.ts
index a509ac585..91df7be5f 100644
--- a/src/modules/04_registryPerson/router.ts
+++ b/src/modules/04_registryPerson/router.ts
@@ -138,7 +138,7 @@ export default [
     },
   },
   {
-    path: "/registry/edit/salary/:id",
+    path: "/registry/edit/salary/:type/:id",
     name: "registryEditSalary",
     component: EditListSalaryPage,
     meta: {
diff --git a/src/modules/04_registryPerson/stores/Edit.ts b/src/modules/04_registryPerson/stores/Edit.ts
new file mode 100644
index 000000000..4727c2256
--- /dev/null
+++ b/src/modules/04_registryPerson/stores/Edit.ts
@@ -0,0 +1,39 @@
+import { ref } from "vue";
+import { defineStore } from "pinia";
+import { useQuasar } from "quasar";
+
+import { useCounterMixin } from "@/stores/mixin";
+
+import type { DataOption } from "@/modules/04_registryPerson/interface/index/Main";
+
+const $q = useQuasar();
+const mixin = useCounterMixin();
+const {} = mixin;
+
+export const useEditPosDataStore = defineStore("EditPos", () => {
+  const commandCodeData = ref<DataOption[]>([]);
+  const posTypeData = ref<DataOption[]>([]); //รายการประเภทตำแหน่ง | กลุ่มงาน
+  const posLevelData = ref<DataOption[]>([]); //รายการระดับตำแหน่ง | ระดับชั้นงาน
+  const posLineData = ref<DataOption[]>([]); //รายการสายงาน
+  const posPathSideData = ref<DataOption[]>([]); //รายการด้าน/สาขา
+  const posExecutiveData = ref<DataOption[]>([]); //รายการตำแหน่งทางการบริหาร
+
+  function convertCommandCodeName(val: string) {
+    return (
+      commandCodeData.value.find((e: DataOption) => e.id === val)?.name ?? "-"
+    );
+  }
+
+  return {
+    // Data
+    commandCodeData,
+    posTypeData,
+    posLevelData,
+    posLineData,
+    posPathSideData,
+    posExecutiveData,
+
+    // Function
+    convertCommandCodeName,
+  };
+});
diff --git a/src/modules/04_registryPerson/views/edit/components/DialogForm.vue b/src/modules/04_registryPerson/views/edit/components/DialogForm.vue
new file mode 100644
index 000000000..b71b595da
--- /dev/null
+++ b/src/modules/04_registryPerson/views/edit/components/DialogForm.vue
@@ -0,0 +1,473 @@
+<script setup lang="ts">
+import { ref, reactive, onMounted, nextTick, watch } from "vue";
+import { useQuasar } from "quasar";
+
+import { useCounterMixin } from "@/stores/mixin";
+import { useEditPosDataStore } from "@/modules/04_registryPerson/stores/Edit";
+import http from "@/plugins/http";
+import config from "@/app.config";
+
+import type { DataOption } from "@/modules/04_registryPerson/interface/index/Main";
+
+import DialogHeader from "@/components/DialogHeader.vue";
+import FormPosition from "@/modules/04_registryPerson/views/edit/components/FormPosition.vue";
+
+const $q = useQuasar();
+const {
+  dialogConfirm,
+  showLoader,
+  hideLoader,
+  messageError,
+  success,
+
+  convertDateToAPI,
+} = useCounterMixin();
+const store = useEditPosDataStore();
+
+const modal = defineModel<boolean>("modal", { required: true });
+const empType = defineModel<string>("empType", { required: true });
+const rowData = defineModel<any[]>("rowData", { required: true });
+const rowIndex = defineModel<number>("rowIndex", { required: true });
+
+const props = defineProps({
+  fetchData: { type: Function, required: true },
+});
+
+const formData = reactive({
+  commandCode: "", //ประเภทคำสั่ง
+  commandNo: "", //เลขที่คำสั่ง
+  commandYear: null, //ปี
+  commandDateAffect: null, //วันที่มีผล
+  commandDateSign: null, //วันที่ลงนาม
+  posNoAbb: "", //ตัวย่อเลขที่ตำแหน่ง
+  posNo: "", //เลขที่ตำแหน่ง
+  positionName: "", //ตำแหน่ง
+  positionType: "", //ประเภทตำแหน่ง | กลุ่มงาน
+  positionLevel: "", //ระดับตำแหน่ง | ระดับชั้นงาน
+  positionCee: "", //ตำแหน่งซี
+  positionLine: "", // สายงาน
+  positionPathSide: "", //ด้าน/สาขา
+  positionExecutive: "", //ตำแหน่งทางการบริหาร
+  amount: null, //เงินเดือน
+  amountSpecial: null, //เงินค่าตอบแทนพิเศษ
+  positionSalaryAmount: null, //เงินประจำตำแหน่ง
+  mouthSalaryAmount: null, //เงินค่าตอบแทนรายเดือน
+  orgRoot: "", //หน่วยงาน
+  orgChild1: "", //ส่วนราชการระดับ 1
+  orgChild2: "", //ส่วนราชการระดับ 2
+  orgChild3: "", //ส่วนราชการระดับ 3
+  orgChild4: "", //ส่วนราชการระดับ 4
+  remark: "", //หมายเหตุ
+});
+const formReadonly = reactive({
+  commandCode: "", //ประเภทคำสั่ง
+  commandNo: "", //เลขที่คำสั่ง
+  commandYear: null, //ปี
+  commandDateAffect: null, //วันที่มีผล
+  commandDateSign: null, //วันที่ลงนาม
+  posNoAbb: "", //ตัวย่อเลขที่ตำแหน่ง
+  posNo: "", //เลขที่ตำแหน่ง
+  positionName: "", //ตำแหน่ง
+  positionType: "", //ประเภทตำแหน่ง | กลุ่มงาน
+  positionLevel: "", //ระดับตำแหน่ง | ระดับชั้นงาน
+  positionCee: "", //ตำแหน่งซี
+  positionLine: "", // สายงาน
+  positionPathSide: "", //ด้าน/สาขา
+  positionExecutive: "", //ตำแหน่งทางการบริหาร
+  amount: null, //เงินเดือน
+  amountSpecial: null, //เงินค่าตอบแทนพิเศษ
+  positionSalaryAmount: null, //เงินประจำตำแหน่ง
+  mouthSalaryAmount: null, //เงินค่าตอบแทนรายเดือน
+  orgRoot: "", //หน่วยงาน
+  orgChild1: "", //ส่วนราชการระดับ 1
+  orgChild2: "", //ส่วนราชการระดับ 2
+  orgChild3: "", //ส่วนราชการระดับ 3
+  orgChild4: "", //ส่วนราชการระดับ 4
+  remark: "", //หมายเหตุ
+});
+
+const dataLevel = ref<any[]>([]); //รายการ ตำแหน่งเงินเดือน
+const commandCodeOptions = ref<DataOption[]>(store.commandCodeData); //รายการปรเภทคำสั่ง
+const posTypeOptions = ref<DataOption[]>(store.posTypeData); //รายการประเภทตำแหน่ง | กลุ่มงาน
+const posLevelOptions = ref<DataOption[]>(store.posLevelData); //รายการระดับตำแหน่ง | ระดับชั้นงาน
+const posLineOptions = ref<DataOption[]>(store.posLineData); //รายการสายงาน
+const posPathSideOptions = ref<DataOption[]>(store.posPathSideData); //รายการด้าน/สาขา
+const posExecutiveOptions = ref<DataOption[]>(store.posExecutiveData); //รายการตำแหน่งทางการบริหาร
+
+const salaryId = ref<string>("");
+
+async function fetchDataPosition() {
+  try {
+    const res = await http.get(
+      config.API.salaryTemp + `/get/${salaryId.value}`
+    );
+    return res.data.result;
+  } catch (err) {
+    messageError($q, err);
+  }
+}
+
+/** function fetch ข้อมูลประเภทคำสั่ง*/
+async function fetchDataCommandCode() {
+  if (store.commandCodeData.length > 0) return false;
+  await http
+    .get(config.API.orgCommandCode)
+    .then((res) => {
+      const data = res.data.result;
+
+      store.commandCodeData = data.map((e: any) => ({
+        id: e.code.toString(),
+        name: e.name,
+      }));
+
+      commandCodeOptions.value = store.commandCodeData;
+    })
+    .catch((err) => {
+      messageError($q, err);
+    });
+}
+
+/** function fetch ข้อมูลปรเภทตำแหน่งข้าราชการ */
+async function fetchType() {
+  await http
+    .get(config.API.orgPosType)
+    .then((res) => {
+      dataLevel.value = res.data.result;
+      store.posTypeData = res.data.result.map((e: any) => ({
+        id: e.id,
+        name: e.posTypeName,
+      }));
+      posTypeOptions.value = store.posTypeData;
+    })
+    .catch((err) => {
+      messageError($q, err);
+    });
+}
+
+/** function fetch ข้อมูลปรเภทตำแหน่งลูกจ้าง*/
+async function fetchOptionGroup() {
+  await http
+    .get(config.API.orgEmployeeType)
+    .then((res) => {
+      dataLevel.value = res.data.result;
+      store.posTypeData = res.data.result.map((e: any) => ({
+        id: e.id,
+        name: e.posTypeName,
+      }));
+      posTypeOptions.value = store.posTypeData;
+    })
+    .catch((err) => {
+      messageError($q, err);
+    });
+}
+
+/** function fetch ข้อมูลสายงาน*/
+async function fetchDataOption() {
+  if (store.posLineData.length > 0 && store.posPathSideData.length > 0)
+    return false;
+
+  await http
+    .get(config.API.orgPosPosition + `?keyword=&type=ALL`)
+    .then((res) => {
+      const data = res.data.result;
+
+      const seen = new Set();
+      const seen2 = new Set();
+
+      const listPositionField = data.filter((item: any) => {
+        if (seen.has(item.positionField)) {
+          return false;
+        } else {
+          seen.add(item.positionField);
+          return true;
+        }
+      });
+      store.posLineData = listPositionField.map((e: any) => ({
+        id: e.positionField,
+        name: e.positionField,
+      }));
+
+      const listPositionArea = data.filter((item: any) => {
+        if (
+          item.positionArea === null ||
+          item.positionArea === "" ||
+          item.positionArea === "-" ||
+          seen2.has(item.positionArea)
+        ) {
+          return false;
+        } else {
+          seen2.add(item.positionArea);
+          return true;
+        }
+      });
+      store.posPathSideData = listPositionArea.map((e: any) => ({
+        id: e.positionArea,
+        name: e.positionArea,
+      }));
+    })
+    .catch((err) => {
+      messageError($q, err);
+    });
+}
+
+/** function fetch ข้อมูลตำแหน่งข้อมูลทางการบริหาร*/
+async function fetchDataOptionExecutive() {
+  await http
+    .get(config.API.orgPosExecutive)
+    .then((res) => {
+      const data = res.data.result;
+      store.posExecutiveData = data.map((e: any) => ({
+        id: e.posExecutiveName,
+        name: e.posExecutiveName,
+      }));
+    })
+    .catch((e) => {
+      messageError($q, e);
+    });
+}
+
+/**
+ * function เลือกประเภทตำแหน่ง
+ * @param val id ประเภทตำแหน่ง
+ * @param status แก่ไข , เพิ่ม
+ */
+async function updateSelectType(val: string, status: boolean = false) {
+  const listLevel = val
+    ? dataLevel.value.find((e: any) => e.posTypeName === val)
+    : null;
+
+  if (listLevel) {
+    store.posLevelData = listLevel.posLevels.map((e: any) => ({
+      id: e.id,
+      name:
+        empType.value === "officer"
+          ? e.posLevelName
+          : `${listLevel.posTypeShortName} ${e.posLevelName}`,
+    }));
+
+    formData.positionLevel = !status ? "" : formData.positionLevel;
+  } else {
+    store.posLevelData = [];
+    formData.positionLevel = "";
+  }
+}
+
+async function onDefineData(index: number) {
+  const data = rowData.value[index];
+  salaryId.value = data.id;
+
+  const newData = await fetchDataPosition();
+  updateSelectType(data.positionType);
+
+  if (newData) {
+    const salaryNew = newData.salaryNew;
+    const salaryOld = newData.salaryOld;
+
+    formData.commandCode = salaryNew.commandCode;
+    formData.commandNo = salaryNew.commandNo;
+    formData.commandYear = salaryNew.commandYear;
+    formData.commandDateAffect = salaryNew.commandDateAffect;
+    formData.commandDateSign = salaryNew.commandDateSign;
+    formData.posNoAbb = salaryNew.posNoAbb;
+    formData.posNo = salaryNew.posNo;
+    formData.positionName = salaryNew.positionName;
+    formData.positionType = salaryNew.positionType;
+    formData.positionLevel = salaryNew.positionLevel;
+    formData.positionCee = salaryNew.positionCee;
+    formData.positionLine = salaryNew.positionLine;
+    formData.positionPathSide = salaryNew.positionPathSide;
+    formData.positionExecutive = salaryNew.positionExecutive;
+    formData.amount = salaryNew.amount;
+    formData.amountSpecial = salaryNew.amountSpecial;
+    formData.positionSalaryAmount = salaryNew.positionSalaryAmount;
+    formData.mouthSalaryAmount = salaryNew.mouthSalaryAmount;
+    formData.orgRoot = salaryNew.orgRoot;
+    formData.orgChild1 = salaryNew.orgChild1;
+    formData.orgChild2 = salaryNew.orgChild2;
+    formData.orgChild3 = salaryNew.orgChild3;
+    formData.orgChild4 = salaryNew.orgChild4;
+    formData.remark = salaryNew.remark;
+
+    formReadonly.commandCode = salaryOld.commandCode;
+    formReadonly.commandNo = salaryOld.commandNo;
+    formReadonly.commandYear = salaryOld.commandYear;
+    formReadonly.commandDateAffect = salaryOld.commandDateAffect;
+    formReadonly.commandDateSign = salaryOld.commandDateSign;
+    formReadonly.posNoAbb = salaryOld.posNoAbb;
+    formReadonly.posNo = salaryOld.posNo;
+    formReadonly.positionName = salaryOld.positionName;
+    formReadonly.positionType = salaryOld.positionType;
+    formReadonly.positionLevel = salaryOld.positionLevel;
+    formReadonly.positionCee = salaryOld.positionCee;
+    formReadonly.positionLine = salaryOld.positionLine;
+    formReadonly.positionPathSide = salaryOld.positionPathSide;
+    formReadonly.positionExecutive = salaryOld.positionExecutive;
+    formReadonly.amount = salaryOld.amount;
+    formReadonly.positionSalaryAmount = salaryOld.positionSalaryAmount;
+    formReadonly.mouthSalaryAmount = salaryOld.mouthSalaryAmount;
+    formReadonly.orgRoot = salaryOld.orgRoot;
+    formReadonly.orgChild1 = salaryOld.orgChild1;
+    formReadonly.orgChild2 = salaryOld.orgChild2;
+    formReadonly.orgChild3 = salaryOld.orgChild3;
+    formReadonly.orgChild4 = salaryOld.orgChild4;
+    formReadonly.remark = salaryOld.remark;
+  }
+}
+
+async function onNavigateRow(action: string) {
+  action === "next" ? (rowIndex.value += 1) : (rowIndex.value -= 1);
+  await nextTick();
+  onDefineData(rowIndex.value);
+}
+
+function onClickCloseDialog() {
+  modal.value = false;
+}
+
+function onSubmit() {
+  console.log(formData);
+  dialogConfirm($q, async () => {
+    showLoader();
+    await http
+      .patch(config.API.salaryTemp + `/${salaryId.value}`, {
+        ...formData,
+        type: empType.value?.toLocaleUpperCase(),
+        commandDateAffect: convertDateToAPI(formData.commandDateAffect),
+        commandDateSign: convertDateToAPI(formData.commandDateSign),
+        amount: Number(String(formData.amount)?.replace(/,/g, "")),
+        amountSpecial: Number(
+          String(formData.amountSpecial)?.replace(/,/g, "")
+        ),
+        positionSalaryAmount: Number(
+          String(formData.positionSalaryAmount)?.replace(/,/g, "")
+        ),
+        mouthSalaryAmount: Number(
+          String(formData.mouthSalaryAmount)?.replace(/,/g, "")
+        ),
+      })
+      .then(async () => {
+        await props.fetchData?.();
+        success($q, "บันทึกข้อมูลสำเร็จ");
+        onClickCloseDialog();
+      })
+      .catch((err) => {
+        messageError($q, err);
+      })
+      .finally(() => {
+        hideLoader();
+      });
+  });
+}
+
+watch(modal, async (val) => {
+  if (val) {
+    showLoader();
+    if (empType.value === "officer") {
+      await Promise.all([
+        fetchType(),
+        fetchDataOption(),
+        fetchDataOptionExecutive(),
+      ]);
+    } else {
+      await fetchOptionGroup();
+    }
+
+    commandCodeOptions.value = store.commandCodeData;
+    posTypeOptions.value = store.posTypeData;
+    posLevelOptions.value = store.posLevelData;
+    posLineOptions.value = store.posLineData;
+    posPathSideOptions.value = store.posPathSideData;
+    posExecutiveOptions.value = store.posExecutiveData;
+    await onDefineData(rowIndex.value);
+    hideLoader();
+  }
+});
+
+onMounted(async () => {
+  await fetchDataCommandCode();
+});
+</script>
+
+<template>
+  <q-dialog v-model="modal" persistent full-width>
+    <q-card>
+      <q-form greedy @submit.prevent @validation-success="onSubmit">
+        <DialogHeader
+          :tittle="'แก้ไขตำแหน่งเงินเดือนเงินเดือน'"
+          :close="onClickCloseDialog"
+        />
+        <q-separator />
+
+        <q-card-section style="padding: 0px">
+          <div class="col-12 row">
+            <div class="col-xs-12 col-md-6 row no-wrap">
+              <div class="col-12 q-pa-md">
+                <FormPosition
+                  :is-readonly="true"
+                  :form-data="formReadonly"
+                  :command-code-options="commandCodeOptions"
+                  :pos-type-options="posTypeOptions"
+                  :pos-level-options="posLevelOptions"
+                  :pos-line-options="posLineOptions"
+                  :pos-path-side-options="posPathSideOptions"
+                  :pos-executive-options="posExecutiveOptions"
+                  :emp-type="empType"
+                  :update-select-type="updateSelectType"
+                />
+              </div>
+              <div class="col-12 row">
+                <q-separator :vertical="!$q.screen.lt.md" />
+              </div>
+            </div>
+
+            <div class="col-xs-12 col-md-6 row">
+              <div class="col-12 q-pa-md">
+                <FormPosition
+                  :is-readonly="false"
+                  v-model:form-data="formData"
+                  v-model:command-code-options="commandCodeOptions"
+                  v-model:pos-type-options="posTypeOptions"
+                  v-model:pos-level-options="posLevelOptions"
+                  v-model:pos-line-options="posLineOptions"
+                  v-model:pos-path-side-options="posPathSideOptions"
+                  v-model:pos-executive-options="posExecutiveOptions"
+                  :emp-type="empType"
+                  :update-select-type="updateSelectType"
+                />
+              </div>
+            </div>
+          </div>
+        </q-card-section>
+
+        <q-separator />
+
+        <q-card-actions align="right">
+          <q-btn label="บันทึก" id="onSubmit" type="submit" color="public">
+            <q-tooltip>บันทึกข้อมูล</q-tooltip>
+          </q-btn>
+          <q-btn
+            :disable="rowIndex === 0"
+            label="ก่อนหน้า"
+            color="public"
+            icon="mdi-arrow-left"
+            @click.stop.pervent="onNavigateRow('previous')"
+          >
+            <q-tooltip>บันทึกข้อมูล</q-tooltip>
+          </q-btn>
+
+          <q-btn
+            :disable="rowIndex + 1 === rowData.length"
+            label="ถัดไป"
+            color="public"
+            icon-right="mdi-arrow-right"
+            @click.stop.pervent="onNavigateRow('next')"
+          >
+            <q-tooltip>บันทึกข้อมูล</q-tooltip>
+          </q-btn>
+        </q-card-actions>
+      </q-form>
+    </q-card>
+  </q-dialog>
+</template>
+
+<style scoped></style>
diff --git a/src/modules/04_registryPerson/views/edit/components/FormPosition.vue b/src/modules/04_registryPerson/views/edit/components/FormPosition.vue
new file mode 100644
index 000000000..3a6f31fe3
--- /dev/null
+++ b/src/modules/04_registryPerson/views/edit/components/FormPosition.vue
@@ -0,0 +1,669 @@
+<script setup lang="ts">
+import { ref, reactive, onMounted, computed } from "vue";
+
+import { useCounterMixin } from "@/stores/mixin";
+import { useEditPosDataStore } from "@/modules/04_registryPerson/stores/Edit";
+
+import type { DataOption } from "@/modules/04_registryPerson/interface/index/Main";
+
+const {
+  date2Thai,
+  dialogConfirm,
+  showLoader,
+  hideLoader,
+  messageError,
+  success,
+  pathRegistryEmp,
+  onSearchDataTable,
+  convertDateToAPI,
+} = useCounterMixin();
+const store = useEditPosDataStore();
+
+const isReadonly = defineModel<boolean>("isReadonly", { required: true });
+const empType = defineModel<string>("empType", { required: true });
+const formData = defineModel<any>("formData", { required: true });
+const commandCodeOptions = defineModel<DataOption[]>("commandCodeOptions", {
+  required: true,
+});
+const posTypeOptions = defineModel<DataOption[]>("posTypeOptions", {
+  required: true,
+});
+const posLevelOptions = defineModel<DataOption[]>("posLevelOptions", {
+  required: true,
+});
+const posLineOptions = defineModel<DataOption[]>("posLineOptions", {
+  required: true,
+});
+const posPathSideOptions = defineModel<DataOption[]>("posPathSideOptions", {
+  required: true,
+});
+const posExecutiveOptions = defineModel<DataOption[]>("posExecutiveOptions", {
+  required: true,
+});
+
+const props = defineProps({
+  updateSelectType: { type: Function, defult: () => {} },
+});
+
+/**
+ * ฟิลเตอร์ข้อมูลจาก input
+ * @param val ค่าที่ป้อนให้ input
+ * @param update function จาก quasar
+ * @param filtername type ที่กำหนด ของ input นั้นๆ
+ */
+function filterSelector(val: string, update: Function, filtername: string) {
+  switch (filtername) {
+    case "commandCode":
+      update(() => {
+        commandCodeOptions.value = store.commandCodeData.filter(
+          (v: DataOption) => v.name.indexOf(val) > -1
+        );
+      });
+      break;
+
+    case "posType":
+      update(() => {
+        posTypeOptions.value = store.posTypeData.filter(
+          (v: DataOption) => v.name.indexOf(val) > -1
+        );
+      });
+      break;
+
+    case "posLevel":
+      update(() => {
+        posLevelOptions.value = store.posLevelData.filter(
+          (v: DataOption) => v.name.indexOf(val) > -1
+        );
+      });
+      break;
+
+    case "posLine":
+      update(() => {
+        posLineOptions.value = store.posLineData.filter(
+          (v: DataOption) => v.name.indexOf(val) > -1
+        );
+      });
+      break;
+
+    case "posPathSide":
+      update(() => {
+        posPathSideOptions.value = store.posPathSideData.filter(
+          (v: DataOption) => v.name.indexOf(val) > -1
+        );
+      });
+      break;
+
+    case "posExecutive":
+      update(() => {
+        posExecutiveOptions.value = store.posExecutiveData.filter(
+          (v: DataOption) => v.name.indexOf(val) > -1
+        );
+      });
+      break;
+
+    default:
+      break;
+  }
+}
+
+function classInput(val: boolean) {
+  return {
+    "full-width  cursor-pointer": val,
+    "full-width  inputgreen cursor-pointer": !val,
+  };
+}
+</script>
+
+<template>
+  <div class="row col-12 q-col-gutter-sm">
+    <div class="col-xs-12 col-sm-12 col-md-8">
+      <!-- :rules="[(val: string) => !!val || 'กรุณาเลือกประเภทคำสั่ง']" -->
+      <q-select
+        outlined
+        :class="classInput(isReadonly)"
+        :readonly="isReadonly"
+        dense
+        lazy-rules
+        borderless
+        v-model="formData.commandCode"
+        :label="`${'ประเภทคำสั่ง'}`"
+        emit-value
+        map-options
+        option-label="name"
+        :options="commandCodeOptions"
+        option-value="id"
+        hide-bottom-space
+        use-input
+        hide-selected
+        fill-input
+        input-debounce="0"
+        @update:model-value="props.updateSelectType"
+        @filter="(inputValue: string,
+                doneFn: Function) => filterSelector(inputValue, doneFn, 'commandCode'
+                )"
+      >
+        <template v-slot:no-option>
+          <q-item>
+            <q-item-section class="text-grey"> ไม่มีข้อมูล </q-item-section>
+          </q-item>
+        </template>
+      </q-select>
+    </div>
+
+    <div class="col-xs-6 col-sm-6 col-md-4">
+      <!-- :rules="[ (val: string) => !!val || `${'กรุณาเลือกวันที่คำสั่งมีผล'}`, ]" -->
+      <datepicker
+        :readonly="isReadonly"
+        v-model="formData.commandDateAffect"
+        :locale="'th'"
+        autoApply
+        :enableTimePicker="false"
+        week-start="0"
+        :class="classInput(isReadonly)"
+      >
+        <template #year="{ year }">{{ year + 543 }}</template>
+        <template #year-overlay-value="{ value }">{{
+          parseInt(value + 543)
+        }}</template>
+        <template #trigger>
+          <q-input
+            :readonly="isReadonly"
+            outlined
+            dense
+            borderless
+            :model-value="date2Thai(formData.commandDateAffect)"
+            :label="`${'วันที่คำสั่งมีผล'}`"
+            hide-bottom-space
+          >
+            <template v-slot:prepend>
+              <q-icon name="event" color="primary" class="cursor-pointer">
+              </q-icon>
+            </template>
+          </q-input>
+        </template>
+      </datepicker>
+    </div>
+
+    <div class="col-xs-6 col-sm-12 col-md-8">
+      <div class="row q-col-gutter-sm">
+        <div class="col-6">
+          <q-input
+            :readonly="isReadonly"
+            :class="classInput(isReadonly)"
+            outlined
+            dense
+            lazy-rules
+            borderless
+            v-model="formData.commandNo"
+            hide-bottom-space
+            :label="`${'เลขที่คำสั่ง'}`"
+          />
+        </div>
+        <label class="col-1 flex justify-center items-center">/</label>
+        <div class="col-5">
+          <!-- :rules="[(val:string) => !!val || `${'กรุณากรอก พ.ศ.'}`]" -->
+          <datepicker
+            menu-class-name="modalfix"
+            v-model="formData.commandYear"
+            :locale="'th'"
+            autoApply
+            year-picker
+            :enableTimePicker="false"
+            class="inputgreen"
+            :readonly="isReadonly"
+          >
+            <template #year="{ year }">{{ year + 543 }}</template>
+            <template #year-overlay-value="{ value }">{{
+              parseInt(value + 543)
+            }}</template>
+            <template #trigger>
+              <q-input
+                :readonly="isReadonly"
+                dense
+                outlined
+                hide-bottom-space
+                :model-value="
+                  formData.commandYear == null
+                    ? null
+                    : formData.commandYear + 543
+                "
+                :label="`${'พ.ศ.'}`"
+              >
+                <template v-slot:prepend>
+                  <q-icon
+                    name="event"
+                    class="cursor-pointer"
+                    style="color: var(--q-primary)"
+                  >
+                  </q-icon>
+                </template>
+              </q-input>
+            </template>
+          </datepicker>
+        </div>
+      </div>
+    </div>
+
+    <div class="col-xs-6 col-sm-6 col-md-4">
+      <!-- :rules="[ (val: string) => !!val || `${'กรุณาเลือก วันที่ลงนาม'}`,]" -->
+      <datepicker
+        v-model="formData.commandDateSign"
+        :locale="'th'"
+        autoApply
+        :enableTimePicker="false"
+        week-start="0"
+        :class="classInput(isReadonly)"
+        :readonly="isReadonly"
+      >
+        <template #year="{ year }">{{ year + 543 }}</template>
+        <template #year-overlay-value="{ value }">{{
+          parseInt(value + 543)
+        }}</template>
+        <template #trigger>
+          <q-input
+            :readonly="isReadonly"
+            outlined
+            dense
+            borderless
+            :model-value="date2Thai(formData.commandDateSign)"
+            :label="`${'วันที่ลงนาม'}`"
+            hide-bottom-space
+          >
+            <template v-slot:prepend>
+              <q-icon name="event" color="primary" class="cursor-pointer">
+              </q-icon>
+            </template>
+          </q-input>
+        </template>
+      </datepicker>
+    </div>
+
+    <div class="col-12">
+      <q-separator />
+    </div>
+
+    <div class="col-xs-6 col-sm-6 col-md-4">
+      <q-input
+        :class="classInput(isReadonly)"
+        :readonly="isReadonly"
+        outlined
+        dense
+        lazy-rules
+        borderless
+        v-model="formData.posNoAbb"
+        hide-bottom-space
+        :label="`${'ตัวย่อ'}`"
+      >
+      </q-input>
+    </div>
+
+    <div class="col-xs-6 col-sm-6 col-md-4">
+      <!-- :rules="[(val: string) => !!val || `${'กรุณากรอกตำแหน่งเลขที่'}`]" -->
+      <q-input
+        :class="classInput(isReadonly)"
+        :readonly="isReadonly"
+        outlined
+        dense
+        lazy-rules
+        borderless
+        v-model="formData.posNo"
+        hide-bottom-space
+        :label="empType === '' ? 'เลขที่ตำแหน่ง' : 'ตำแหน่งเลขที่'"
+      >
+      </q-input>
+    </div>
+
+    <div class="col-xs-12 col-sm-6 col-md-4">
+      <!-- :rules="empType == '' ? [(val: string) => !!val || 'กรุณากรอกตำแหน่งในสายงาน' ] : [(val: string) => !!val ||   'กรุณากรอกตำแหน่ง']" -->
+      <q-input
+        :class="classInput(isReadonly)"
+        :readonly="isReadonly"
+        outlined
+        dense
+        lazy-rules
+        borderless
+        v-model="formData.positionName"
+        :label="empType == '' ? 'ตำแหน่งในสายงาน' : 'ตำแหน่ง'"
+        hide-bottom-space
+      />
+    </div>
+
+    <div class="col-xs-6 col-sm-6 col-md-4">
+      <!-- :rules="empType == '' ? [(val: string) => !!val || 'กรุณาเลือกประเภทตำแหน่ง'  ]:[(val: string) => !!val ||  'กรุณาเลือกกลุ่มงาน' ]" -->
+      <q-select
+        outlined
+        :class="classInput(isReadonly)"
+        :readonly="isReadonly"
+        dense
+        lazy-rules
+        borderless
+        v-model="formData.positionType"
+        :label="empType == '' ? 'ประเภทตำแหน่ง' : 'กลุ่มงาน'"
+        emit-value
+        map-options
+        option-label="name"
+        :options="posTypeOptions"
+        option-value="name"
+        hide-bottom-space
+        use-input
+        hide-selected
+        fill-input
+        clearable
+        input-debounce="0"
+        @update:model-value="props.updateSelectType"
+        @filter="(inputValue: string,
+                  doneFn: Function) => filterSelector(inputValue, doneFn, 'posType'
+                  )"
+      >
+        <template v-slot:no-option>
+          <q-item>
+            <q-item-section class="text-grey"> ไม่มีข้อมูล </q-item-section>
+          </q-item>
+        </template>
+      </q-select>
+    </div>
+
+    <div class="col-xs-6 col-sm-6 col-md-4">
+      <!-- :rules="empType == '' ? [(val: string) => !!val || 'กรุณาเลือกระดับตำแหน่ง' ] : [(val: string) => !!val ||   'กรุณาเลือกระดับชั้นงาน']" -->
+      <q-select
+        :class="classInput(isReadonly)"
+        :readonly="isReadonly"
+        :disable="!formData.positionType"
+        outlined
+        dense
+        lazy-rules
+        borderless
+        v-model="formData.positionLevel"
+        :label="empType == '' ? 'ระดับตำแหน่ง' : 'ระดับชั้นงาน'"
+        emit-value
+        map-options
+        option-label="name"
+        :options="posLevelOptions"
+        option-value="name"
+        hide-bottom-space
+        use-input
+        hide-selected
+        fill-input
+        input-debounce="0"
+        @filter="(inputValue: string,
+                    doneFn: Function) => filterSelector(inputValue, doneFn, 'posLevel'
+                    )"
+        ><template v-slot:no-option>
+          <q-item>
+            <q-item-section class="text-grey"> ไม่มีข้อมูล </q-item-section>
+          </q-item>
+        </template>
+      </q-select>
+    </div>
+
+    <div class="col-xs-6 col-sm-6 col-md-4" v-if="empType == ''">
+      <q-input
+        :class="classInput(isReadonly)"
+        :readonly="isReadonly"
+        outlined
+        dense
+        lazy-rules
+        borderless
+        v-model="formData.positionCee"
+        hide-bottom-space
+        :label="`${'ระดับซี'}`"
+      >
+      </q-input>
+    </div>
+
+    <div class="col-xs-6 col-sm-6 col-md-4" v-if="empType == ''">
+      <q-select
+        outlined
+        :class="classInput(isReadonly)"
+        :readonly="isReadonly"
+        dense
+        lazy-rules
+        borderless
+        v-model="formData.positionLine"
+        :label="`${'สายงาน'}`"
+        emit-value
+        map-options
+        option-label="name"
+        :options="posLineOptions"
+        option-value="id"
+        hide-bottom-space
+        use-input
+        hide-selected
+        fill-input
+        clearable
+        input-debounce="0"
+        @filter="(inputValue: string,
+                  doneFn: Function) => filterSelector(inputValue, doneFn, 'posLine'
+                  )"
+      >
+        <template v-slot:no-option>
+          <q-item>
+            <q-item-section class="text-grey"> ไม่มีข้อมูล </q-item-section>
+          </q-item>
+        </template></q-select
+      >
+    </div>
+
+    <div class="col-xs-6 col-sm-6 col-md-4" v-if="empType == ''">
+      <q-select
+        :class="classInput(isReadonly)"
+        :readonly="isReadonly"
+        outlined
+        dense
+        lazy-rules
+        borderless
+        v-model="formData.positionPathSide"
+        :label="`${'ด้าน/สาขา'}`"
+        emit-value
+        map-options
+        option-label="name"
+        :options="posPathSideOptions"
+        option-value="id"
+        hide-bottom-space
+        use-input
+        hide-selected
+        fill-input
+        clearable
+        input-debounce="0"
+        @filter="(inputValue: string,
+                  doneFn: Function) => filterSelector(inputValue, doneFn, 'posPathSide'
+                  )"
+      >
+        <template v-slot:no-option>
+          <q-item>
+            <q-item-section class="text-grey"> ไม่มีข้อมูล </q-item-section>
+          </q-item>
+        </template>
+      </q-select>
+    </div>
+
+    <div class="col-xs-6 col-sm-6 col-md-4" v-if="empType == ''">
+      <q-select
+        :class="classInput(isReadonly)"
+        :readonly="isReadonly"
+        outlined
+        dense
+        lazy-rules
+        borderless
+        v-model="formData.positionExecutive"
+        :label="`${'ตำแหน่งทางการบริหาร'}`"
+        emit-value
+        map-options
+        option-label="name"
+        :options="posExecutiveOptions"
+        option-value="id"
+        hide-bottom-space
+        use-input
+        hide-selected
+        fill-input
+        input-debounce="0"
+        clearable
+        @filter="(inputValue: string,
+                doneFn: Function) => filterSelector(inputValue, doneFn, 'posExecutive'
+                )"
+      >
+        <template v-slot:no-option>
+          <q-item>
+            <q-item-section class="text-grey"> ไม่มีข้อมูล </q-item-section>
+          </q-item>
+        </template>
+      </q-select>
+    </div>
+
+    <div class="col-12">
+      <div class="row q-col-gutter-sm">
+        <div class="col-xs-6 col-sm-6 col-md-4">
+          <q-input
+            :class="classInput(isReadonly)"
+            :readonly="isReadonly"
+            ref="salaryRef"
+            dense
+            outlined
+            v-model="formData.amount"
+            label="เงินเดือน"
+            mask="###,###,###,###"
+            reverse-fill-mask
+            :rules="!isReadonly ? [(val:string) => !!val || `${'กรุณากรอกเงินเดือน'}`] :[]"
+            lazy-rules
+            hide-bottom-space
+          />
+        </div>
+
+        <div class="col-xs-6 col-sm-6 col-md-4">
+          <q-input
+            :class="classInput(isReadonly)"
+            :readonly="isReadonly"
+            ref="amountSpecialRef"
+            dense
+            outlined
+            v-model="formData.amountSpecial"
+            label="เงินค่าตอบแทนพิเศษ"
+            mask="###,###,###,###"
+            reverse-fill-mask
+            hide-bottom-space
+          />
+        </div>
+
+        <div class="col-xs-6 col-sm-6 col-md-4">
+          <q-input
+            :class="classInput(isReadonly)"
+            :readonly="isReadonly"
+            dense
+            outlined
+            v-model="formData.positionSalaryAmount"
+            label="เงินประจำตำแหน่ง"
+            mask="###,###,###,###"
+            reverse-fill-mask
+            lazy-rules
+            hide-bottom-space
+          />
+        </div>
+
+        <div class="col-xs-6 col-sm-6 col-md-4">
+          <q-input
+            :class="classInput(isReadonly)"
+            :readonly="isReadonly"
+            dense
+            outlined
+            v-model="formData.mouthSalaryAmount"
+            label="เงินค่าตอบแทนรายเดือน"
+            mask="###,###,###,###"
+            reverse-fill-mask
+            lazy-rules
+            hide-bottom-space
+          />
+        </div>
+      </div>
+    </div>
+
+    <div class="col-xs-12 col-sm-12 col-md-12">
+      <div class="row q-col-gutter-sm">
+        <div class="col-xs-12 col-sm-4 col-md-4">
+          <q-input
+            :class="classInput(isReadonly)"
+            :readonly="isReadonly"
+            outlined
+            dense
+            lazy-rules
+            borderless
+            v-model="formData.orgRoot"
+            hide-bottom-space
+            :label="`${'หน่วยงาน'}`"
+          />
+        </div>
+
+        <div class="col-xs-12 col-sm-4 col-md-4">
+          <q-input
+            :class="classInput(isReadonly)"
+            :readonly="isReadonly"
+            outlined
+            dense
+            lazy-rules
+            borderless
+            v-model="formData.orgChild1"
+            hide-bottom-space
+            :label="`${'ส่วนราชการระดับ 1'}`"
+          />
+        </div>
+
+        <div class="col-xs-12 col-sm-4 col-md-4">
+          <q-input
+            :class="classInput(isReadonly)"
+            :readonly="isReadonly"
+            outlined
+            dense
+            lazy-rules
+            borderless
+            v-model="formData.orgChild2"
+            hide-bottom-space
+            :label="`${'ส่วนราชการระดับ 2'}`"
+          />
+        </div>
+
+        <div class="col-xs-12 col-sm-4 col-md-4">
+          <q-input
+            :class="classInput(isReadonly)"
+            :readonly="isReadonly"
+            outlined
+            dense
+            lazy-rules
+            borderless
+            v-model="formData.orgChild3"
+            hide-bottom-space
+            :label="`${'ส่วนราชการระดับ 3'}`"
+          />
+        </div>
+
+        <div class="col-xs-12 col-sm-4 col-md-4">
+          <q-input
+            :class="classInput(isReadonly)"
+            :readonly="isReadonly"
+            outlined
+            dense
+            lazy-rules
+            borderless
+            v-model="formData.orgChild4"
+            hide-bottom-space
+            :label="`${'ส่วนราชการระดับ 4'}`"
+          />
+        </div>
+      </div>
+    </div>
+
+    <div class="col-xs-12 col-sm-12 col-md-12">
+      <q-input
+        :class="classInput(isReadonly)"
+        :readonly="isReadonly"
+        ref="docRef"
+        outlined
+        dense
+        borderless
+        v-model="formData.remark"
+        :label="`${'หมายเหตุ'}`"
+        type="textarea"
+      />
+    </div>
+  </div>
+</template>
+
+<style scoped></style>
diff --git a/src/modules/04_registryPerson/views/edit/components/Table.vue b/src/modules/04_registryPerson/views/edit/components/Table.vue
new file mode 100644
index 000000000..2458b2df4
--- /dev/null
+++ b/src/modules/04_registryPerson/views/edit/components/Table.vue
@@ -0,0 +1,524 @@
+<script setup lang="ts">
+import { ref, reactive, onMounted, computed } from "vue";
+import { useQuasar } from "quasar";
+
+import http from "@/plugins/http";
+import config from "@/app.config";
+import { useCounterMixin } from "@/stores/mixin";
+import { useRoute } from "vue-router";
+
+import { useEditPosDataStore } from "@/modules/04_registryPerson/stores/Edit";
+
+const route = useRoute();
+const store = useEditPosDataStore();
+
+const empType = ref<string>(route.params.type.toString());
+const profileId = ref<string>(route.params.id.toString());
+
+const tabs = defineModel<string>("tabs", { required: true });
+
+import type { QTableColumn } from "quasar";
+
+import DialogForm from "@/modules/04_registryPerson/views/edit/components/DialogForm.vue";
+
+const $q = useQuasar();
+const {
+  date2Thai,
+  findOrgName,
+  onSearchDataTable,
+  dialogRemove,
+  showLoader,
+  hideLoader,
+  messageError,
+  success,
+} = useCounterMixin();
+
+//Table
+const isLoad = ref<boolean>(true);
+const rowIndex = ref<number>(0);
+const rows = ref<any[]>([]);
+const rowsMain = ref<any[]>([]);
+const keyword = ref<string>("");
+const baseColumns = ref<QTableColumn[]>([
+  {
+    name: "commandDateAffect",
+    align: "left",
+    label: "วันที่คำสั่งมีผล",
+    sortable: false,
+    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: "commandDateSign",
+    align: "left",
+    label: "วันที่ลงนาม",
+    sortable: false,
+    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: "posNo",
+    align: "left",
+    label: empType.value === "employee" ? "ตำแหน่งเลขที่" : "เลขที่ตำแหน่ง",
+    sortable: false,
+    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: false,
+    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: false,
+    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: false,
+    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: false,
+    field: "positionExecutive",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "commandNo",
+    align: "left",
+    label: "เลขที่คำสั่ง",
+    sortable: false,
+    field: "commandNo",
+    format(val, row) {
+      return row.commandNo && row.commandYear
+        ? `${row.commandNo}/${Number(row.commandYear) + 543}`
+        : "";
+    },
+    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: false,
+    field: "commandCode",
+    format(val, row) {
+      return store.convertCommandCodeName(val);
+    },
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "organization",
+    align: "left",
+    label: "สังกัด",
+    sortable: false,
+    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: "amount",
+    align: "left",
+    label: empType.value === "employee" ? "ค่าจ้าง" : "เงินเดือน",
+    sortable: false,
+    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: "mouthSalaryAmount",
+    align: "left",
+    label: "เงินค่าตอบแทนรายเดือน",
+    sortable: false,
+    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: "positionSalaryAmount",
+    align: "left",
+    label: "เงินประจำตำแหน่ง",
+    sortable: false,
+    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: "remark",
+    align: "left",
+    label: "หมายเหตุ",
+    sortable: false,
+    field: "remark",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    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",
+]);
+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;
+});
+
+const modal = ref<boolean>(false);
+
+async function fetchData() {
+  isLoad.value = true;
+  rowsMain.value = [];
+  rows.value = [];
+  const paht =
+    tabs.value === "PENDING"
+      ? `/${empType.value}/${profileId.value}`
+      : `/${empType.value}/done/${profileId.value}`;
+  http
+    .get(config.API.salaryTemp + `${paht}`)
+    .then((res) => {
+      const data = res.data.result;
+      rowsMain.value = data;
+      rows.value = data;
+    })
+    .catch((err) => {
+      messageError($q, err);
+    })
+    .finally(() => {
+      isLoad.value = false;
+    });
+}
+
+function serchDataTable() {
+  rows.value = onSearchDataTable(
+    keyword.value,
+    rowsMain.value,
+    columns.value ? columns.value : []
+  );
+}
+
+function onEditData(index: number) {
+  rowIndex.value = index;
+  modal.value = true;
+}
+
+async function onSwapData(action: string, id: string) {
+  showLoader();
+  await http
+    .get(config.API.salaryTemp + `/swap/${action}/${id}`)
+    .then(async () => {
+      await fetchData();
+    })
+    .catch((err) => {
+      messageError($q, err);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+}
+
+function onDeleteData(id: string) {
+  dialogRemove($q, async () => {
+    showLoader();
+    await http
+      .post(config.API.salaryTemp + `/delete`, {
+        type: empType.value,
+        salaryId: id,
+      })
+      .then(async () => {
+        await fetchData();
+        success($q, "ลบข้อมูลสำเร็จ");
+      })
+      .catch((err) => {
+        messageError($q, err);
+      })
+      .finally(() => {
+        hideLoader();
+      });
+  });
+}
+
+function classColorRow(isDelete: boolean, isEdit: boolean, isEntry: boolean) {
+  return isDelete
+    ? "text-red"
+    : isEdit
+    ? "text-yellow-8"
+    : isEntry
+    ? "text-grey"
+    : "";
+}
+
+onMounted(() => {
+  fetchData();
+});
+</script>
+
+<template>
+  <div class="row q-col-gutter-sm">
+    <div class="col-12">
+      <div class="row q-col-gutter-sm">
+        <q-space />
+        <q-input
+          dense
+          outlined
+          v-model="keyword"
+          label="ค้นหา"
+          @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>
+    </div>
+
+    <div class="col-12">
+      <d-table
+        ref="table"
+        row-key="id"
+        flat
+        bordered
+        dense
+        :columns="columns"
+        :rows="rows"
+        :paging="true"
+        :rows-per-page-options="[20, 50, 100]"
+        :visible-columns="visibleColumns"
+        :loading="isLoad"
+      >
+        >
+        <template v-slot:header="props">
+          <q-tr :props="props">
+            <q-th v-if="tabs === 'PENDING'" />
+            <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-if="tabs === 'PENDING'">
+              <q-btn
+                dense
+                flat
+                round
+                :color="props.rowIndex + 1 == 1 ? 'grey' : 'green'"
+                :disable="props.rowIndex + 1 == 1"
+                icon="mdi-arrow-up-bold"
+                @click.stop.pervent="onSwapData('up', props.row.id)"
+              />
+              <q-btn
+                dense
+                flat
+                round
+                :color="rows.length == props.rowIndex + 1 ? 'grey' : 'red'"
+                :disable="rows.length == props.rowIndex + 1"
+                icon="mdi-arrow-down-bold"
+                @click.stop.pervent="onSwapData('down', props.row.id)"
+              >
+              </q-btn>
+
+              <q-btn
+                flat
+                dense
+                round
+                color="edit"
+                icon="edit"
+                @click.stop.pervent="onEditData(props.rowIndex)"
+              >
+                <q-tooltip>แก้ไขข้อมูล</q-tooltip>
+              </q-btn>
+              <q-btn
+                flat
+                dense
+                round
+                icon="delete"
+                :color="props.row.isDelete ? 'grey' : 'red'"
+                :disable="props.row.isDelete"
+                @click.stop.pervent="onDeleteData(props.row.id)"
+              >
+                <q-tooltip>ลบ</q-tooltip>
+              </q-btn>
+            </q-td>
+            <q-td
+              v-for="col in props.cols"
+              :key="col.id"
+              :class="
+                classColorRow(
+                  props.row.isDelete,
+                  props.row.isEdit,
+                  props.row.isEntry
+                )
+              "
+            >
+              <div
+                v-if="col.name === 'organization'"
+                class="text-html table_ellipsis"
+              >
+                {{ col.value ? col.value : "-" }}
+              </div>
+              <div
+                v-else-if="col.name === 'commandCode'"
+                class="table_ellipsis"
+              >
+                {{ col.value ? col.value : "-" }}
+              </div>
+              <div v-else>
+                {{ col.value ? col.value : "-" }}
+              </div>
+            </q-td>
+          </q-tr>
+        </template>
+      </d-table>
+    </div>
+  </div>
+
+  <DialogForm
+    v-model:modal="modal"
+    v-model:row-index="rowIndex"
+    :emp-type="empType"
+    :row-data="rows"
+    :fetch-data="fetchData"
+  />
+</template>
+
+<style scoped></style>
diff --git a/src/modules/04_registryPerson/views/edit/list.vue b/src/modules/04_registryPerson/views/edit/list.vue
index e0b2d52a9..78f8726b4 100644
--- a/src/modules/04_registryPerson/views/edit/list.vue
+++ b/src/modules/04_registryPerson/views/edit/list.vue
@@ -4,33 +4,287 @@ import { useQuasar } from "quasar";
 
 import http from "@/plugins/http";
 import config from "@/app.config";
-import { useRegistryNewDataStore } from "@/modules/04_registryPerson/store";
 import { useCounterMixin } from "@/stores/mixin";
 import { useRoute, useRouter } from "vue-router";
 
 /** importType*/
-import type {
-  DataNodeData,
-  QueryParams,
-} from "@/modules/04_registryPerson/interface/request/Main";
-import type {
-  DataPerson,
-  DataType,
-} from "@/modules/04_registryPerson/interface/response/Main";
+import type { QTableColumn } from "quasar";
 
 const $q = useQuasar();
-const store = useRegistryNewDataStore();
 const { showLoader, hideLoader, messageError } = useCounterMixin();
 const route = useRoute();
 const router = useRouter();
 
-const empType = ref<string>("officer"); // officer / employee / perm
-const dataPersonMain = ref<DataPerson[]>([]); //ข้อมูลรายการที่ค้นหาข้อมูลทะเบียนประวัติ
+const organizationOps = ref<any[]>([]);
+const organizationOpsMain = ref<any[]>([]);
+const employeeClassOpsMain = ref<any[]>([
+  { id: "officer", name: "ข้าราชการ กทม.สามัญ" },
+  { id: "employee", name: "ลูกจ้างประจำ" },
+]);
+const employeeClassOps = ref<any[]>(employeeClassOpsMain.value);
+const statusOpsMain = ref<any[]>([
+  {
+    id: "ALL",
+    name: "ทั้งหมด",
+  },
+  {
+    id: "PENDING",
+    name: "ยังไม่ได้แก้ไข",
+  },
+  {
+    id: "EDITED",
+    name: "แก้ไขแล้ว",
+  },
+  {
+    id: "CHECKED",
+    name: "ตรวจสอบแล้ว",
+  },
+]);
+const statusOps = ref<any[]>(statusOpsMain.value);
 
-const isLoad = ref<boolean>(false); //โหลดข้อมูลโครงสร้าง
+//Table
+const organization = ref<string>("");
+const filter = reactive({
+  status: "ALL",
+  empType: "officer",
+  keyword: "",
+  page: 1,
+  pageSize: 10,
+});
+const total = ref<number>(0);
+const maxPage = ref<number>(0);
+const rows = ref<any[]>([]);
+const columns = ref<QTableColumn[]>([
+  {
+    name: "posNo",
+    align: "left",
+    label: filter.empType === "officer" ? "เลขที่ตำแหน่ง" : "ตำแหน่งเลขที่",
+    sortable: true,
+    field: "posNo",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "citizenId",
+    align: "left",
+    label: "เลขประจำตัวประชาชน",
+    sortable: true,
+    field: "citizenId",
+    headerStyle: "font-size: 14px; min-width: 200px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "fullName",
+    align: "left",
+    label: "ชื่อ-นามสกุล",
+    sortable: true,
+    field: "fullName",
+    format(val, row) {
+      return `${row.prefix}${row.firstName} ${row.lastName}`;
+    },
+    headerStyle: "font-size: 14px; min-width: 200px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "position",
+    align: "left",
+    label: "ตำแหน่งในสายงาน",
+    sortable: true,
+    field: "position",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "posType",
+    align: "left",
+    label: filter.empType === "officer" ? "ตำแหน่งประเภท" : "กลุ่มงาน",
+    sortable: true,
+    field: "posType",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "posLevel",
+    align: "left",
+    label: filter.empType === "officer" ? "ระดับ" : "ระดับชั้นงาน",
+    sortable: true,
+    field: "posLevel",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    format(val, row) {
+      return row.posTypeShortName
+        ? row.posTypeShortName + " " + row.posLevel
+        : row.posLevel;
+    },
+  },
+  {
+    name: "org",
+    align: "left",
+    label: "สังกัด",
+    sortable: true,
+    field: "org",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "statusCheckEdit",
+    align: "left",
+    label: "สถานะ",
+    sortable: true,
+    field: "statusCheckEdit",
+    format(val, row) {
+      return statusOpsMain.value.find((e) => e.id === val)?.name;
+    },
+    headerStyle: "font-size: 14px;pointer-events: none;",
+    style: "font-size: 14px",
+  },
+]);
+const visibleColumns = ref<string[]>([
+  "posNo",
+  "citizenId",
+  "fullName",
+  "position",
+  "posType",
+  "posLevel",
+  "org",
+  "statusCheckEdit",
+]);
+
+/** function fetch ข้อมูลโครงสร้างปัจจุบัน*/
+async function fetchActiveOrg() {
+  showLoader();
+  http
+    .get(config.API.activeOrganization)
+    .then((res) => {
+      const data = res.data.result;
+      fetchListOrg(data.activeId);
+    })
+    .catch((err) => {
+      messageError($q, err);
+      hideLoader();
+    });
+}
+
+/**
+ * function fetch ข้อมูลหน่วยงาน
+ * @param id โครงสร้างปัจจุบัน
+ */
+function fetchListOrg(id: string) {
+  showLoader();
+  http
+    .get(config.API.orgByIdSystem(id, route.meta.Key as string))
+    .then(async (res) => {
+      const data = await res.data.result.map((item: any) => ({
+        id: item.orgTreeId,
+        name: item.orgName,
+      }));
+      organizationOpsMain.value = data;
+      organizationOps.value = data;
+    })
+    .catch((err) => {
+      messageError($q, err);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+}
+
+/**
+ * function ค้นหาคำใน select
+ * @param val คำค้นหา
+ * @param update function
+ * @param type ประเภท select
+ */
+function filterSelector(val: string, update: Function, type: string) {
+  switch (type) {
+    case "organization":
+      update(() => {
+        organizationOps.value = organizationOpsMain.value.filter(
+          (v: any) => v.name.toLowerCase().indexOf(val) > -1
+        );
+      });
+      break;
+    case "employeeClass":
+      update(() => {
+        employeeClassOps.value = employeeClassOpsMain.value.filter(
+          (v: any) => v.name.toLowerCase().indexOf(val) > -1
+        );
+      });
+      break;
+
+    case "status":
+      update(() => {
+        statusOps.value = statusOpsMain.value.filter(
+          (v: any) => v.name.toLowerCase().indexOf(val) > -1
+        );
+      });
+      break;
+    default:
+      break;
+  }
+}
+
+/** function fetch รายการแก้ไขทะเบียนประวัติ ตำแหน่ง/เงินเดือน*/
+function fetchData() {
+  let queryParams = {
+    page: filter.page,
+    pageSize: filter.pageSize,
+    type: filter.empType?.toLocaleUpperCase(),
+    searchKeyword: filter.keyword,
+    statusCheckEdit: filter.status?.toLocaleUpperCase(),
+    rootId: organization.value,
+  };
+
+  if (organization.value !== "" && filter.empType !== "") {
+    rows.value = [];
+    showLoader();
+    http
+      .get(config.API.salaryTemp, { params: queryParams })
+      .then((res) => {
+        const data = res.data.result;
+        total.value = data.total;
+        maxPage.value = Math.ceil(data.total / filter.pageSize);
+        rows.value = data.data;
+      })
+      .catch((err) => {
+        messageError($q, err);
+      })
+      .finally(() => {
+        hideLoader();
+      });
+  }
+}
+
+/**
+ * function ค้นหาข้อมูล
+ * @param val true จะค้นหาหน้าแรก
+ */
+function onSearchData(val: boolean = true) {
+  if (val) {
+    filter.page = 1;
+  }
+
+  fetchData();
+}
+
+/**
+ * function เปลี่ยนแถวต่อหน้า
+ * @param newPagination ข้อมูล Pagination
+ */
+function updatePageSize(newPagination: any) {
+  filter.pageSize = newPagination.rowsPerPage;
+  onSearchData();
+}
+
+function onRedirectToPosition(id: string, type: string) {
+  const tyepeLower = type?.toLocaleLowerCase();
+  router.push(`/registry/edit/salary/${tyepeLower}/${id}`);
+}
 
 /** hook เมื่อมีการเรียกใช้ Components*/
-onMounted(async () => {});
+onMounted(async () => {
+  await fetchActiveOrg();
+});
 </script>
 
 <template>
@@ -39,6 +293,188 @@ onMounted(async () => {});
       แก้ไขทะเบียนประวัติ ตำแหน่ง/เงินเดือน
     </div>
   </div>
+  <q-card flat bordered class="q-pa-md q-col-gutter-sm">
+    <div class="row">
+      <q-select
+        outlined
+        dense
+        borderless
+        hide-selected
+        fill-input
+        hide-bottom-space
+        option-label="name"
+        option-value="id"
+        emit-value
+        map-options
+        v-model="organization"
+        :options="organizationOps"
+        label="หน่วยงาน"
+        use-input
+        @update:model-value="onSearchData()"
+        @filter="(inputValue: string,
+            doneFn: Function) => filterSelector(inputValue, doneFn,'organization' )"
+      >
+        <template v-slot:no-option>
+          <q-item>
+            <q-item-section class="text-grey"> ไม่มีข้อมูล </q-item-section>
+          </q-item>
+        </template>
+      </q-select>
+    </div>
+
+    <div class="row q-col-gutter-sm">
+      <q-select
+        outlined
+        dense
+        borderless
+        hide-selected
+        fill-input
+        hide-bottom-space
+        option-label="name"
+        option-value="id"
+        emit-value
+        map-options
+        v-model="filter.empType"
+        :options="employeeClassOps"
+        label="ประเภทตำแหน่ง"
+        use-input
+        @update:model-value="onSearchData()"
+        @filter="(inputValue: string,
+          doneFn: Function) => filterSelector(inputValue, doneFn,'employeeClass' )"
+      >
+        <template v-slot:no-option>
+          <q-item>
+            <q-item-section class="text-grey"> ไม่มีข้อมูล </q-item-section>
+          </q-item>
+        </template>
+      </q-select>
+
+      <q-select
+        outlined
+        dense
+        borderless
+        hide-selected
+        fill-input
+        hide-bottom-space
+        option-label="name"
+        option-value="id"
+        emit-value
+        map-options
+        v-model="filter.status"
+        :options="statusOps"
+        label="สถานะ"
+        use-input
+        @update:model-value="onSearchData()"
+        @filter="(inputValue: string,
+        doneFn: Function) => filterSelector(inputValue, doneFn,'status' )"
+      >
+        <template v-slot:no-option>
+          <q-item>
+            <q-item-section class="text-grey"> ไม่มีข้อมูล </q-item-section>
+          </q-item>
+        </template>
+      </q-select>
+
+      <q-space />
+      <q-input
+        dense
+        outlined
+        v-model="filter.keyword"
+        label="ค้นหา"
+        @keydown.enter.pervent="onSearchData()"
+      >
+        <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>
+
+    <div class="col-12">
+      <d-table
+        ref="table"
+        row-key="id"
+        flat
+        bordered
+        dense
+        :columns="columns"
+        :rows="rows"
+        :paging="true"
+        :rows-per-page-options="[20, 50, 100]"
+        :visible-columns="visibleColumns"
+        @update:pagination="updatePageSize"
+      >
+        >
+        <template v-slot:header="props">
+          <q-tr :props="props">
+            <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"
+            class="cursor-pointer"
+            @click.stop,pervent="
+              onRedirectToPosition(props.row.id, props.row.type)
+            "
+          >
+            <q-td>
+              <q-icon
+                size="sm"
+                v-if="props.row.statusCheckEdit !== 'PENDING'"
+                :name="
+                  props.row.statusCheckEdit === 'CHECKED'
+                    ? 'mdi-check-circle'
+                    : 'mdi-alert-circle'
+                "
+                :color="
+                  props.row.statusCheckEdit === 'CHECKED' ? 'green' : 'orange-5'
+                "
+              />
+            </q-td>
+            <q-td v-for="col in props.cols" :key="col.id">
+              <div v-if="col.name === 'org'" class="text-html table_ellipsis">
+                {{ col.value ? col.value : "-" }}
+              </div>
+              <div v-else>
+                {{ col.value ? col.value : "-" }}
+              </div>
+            </q-td>
+          </q-tr>
+        </template>
+        <template v-slot:pagination="scope">
+          ทั้งหมด {{ total }} รายการ
+          <q-pagination
+            v-model="filter.page"
+            active-color="primary"
+            color="dark"
+            :max="Number(maxPage)"
+            :max-pages="5"
+            size="sm"
+            boundary-links
+            direction-links
+            @update:model-value="onSearchData(false)"
+          ></q-pagination>
+        </template>
+      </d-table>
+    </div>
+  </q-card>
 </template>
 
 <style scoped></style>
diff --git a/src/modules/04_registryPerson/views/edit/salary.vue b/src/modules/04_registryPerson/views/edit/salary.vue
index a5207b19d..07f297ed5 100644
--- a/src/modules/04_registryPerson/views/edit/salary.vue
+++ b/src/modules/04_registryPerson/views/edit/salary.vue
@@ -9,36 +9,235 @@ import { useCounterMixin } from "@/stores/mixin";
 import { useRoute, useRouter } from "vue-router";
 
 /** importType*/
-import type {
-  DataNodeData,
-  QueryParams,
-} from "@/modules/04_registryPerson/interface/request/Main";
-import type {
-  DataPerson,
-  DataType,
-} from "@/modules/04_registryPerson/interface/response/Main";
+
+import Table from "@/modules/04_registryPerson/views/edit/components/Table.vue";
 
 const $q = useQuasar();
 const store = useRegistryNewDataStore();
-const { showLoader, hideLoader, messageError } = useCounterMixin();
+const { showLoader, hideLoader, messageError, dialogConfirm, findOrgName } =
+  useCounterMixin();
 const route = useRoute();
 const router = useRouter();
 
-const empType = ref<string>("officer"); // officer / employee / perm
-const dataPersonMain = ref<DataPerson[]>([]); //ข้อมูลรายการที่ค้นหาข้อมูลทะเบียนประวัติ
+const dataProfile = ref<any>();
+const tabs = ref<string>("PENDING");
+const empType = ref<string>(route.params.type.toString());
+const profileId = ref<string>(route.params.id.toString());
 
-const isLoad = ref<boolean>(false); //โหลดข้อมูลโครงสร้าง
+async function fetchDataProfile() {
+  showLoader();
+  await http
+    .get(
+      config.API.profileidPosition(
+        empType.value === "officer" ? "" : "-employee"
+      ) + `/${profileId.value}`
+    )
+    .then(async (res) => {
+      const data = res.data.result;
+      dataProfile.value = {
+        fullName: `${data.prefix}${data.firstName} ${data.lastName}`,
+        position: data.position,
+        citizenId: data.citizenId,
+        posNo: data.posNo,
+        posType: data.posTypeName,
+        posLevel: data.posLevelName,
+        org: findOrgName(data),
+      };
+    })
+    .catch((err) => {
+      messageError($q, err);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+}
+
+function onConfirmEdit() {
+  dialogConfirm(
+    $q,
+    () => {
+      showLoader();
+      http
+        .post(config.API.salaryTemp + `/confirm-edit`, {
+          profileId: profileId.value,
+          type: empType.value,
+        })
+        .then((res) => {})
+        .catch((err) => {
+          messageError($q, err);
+        })
+        .finally(() => {
+          hideLoader();
+        });
+    },
+    "ยืนยันเสร็จสิ้นการแก้ไข",
+    "ต้องการยืนยันเสร็จสิ้นการแก้ไขใช่หรือไม่?"
+  );
+}
+
+function onConfirmDone() {
+  dialogConfirm(
+    $q,
+    () => {
+      showLoader();
+      http
+        .post(config.API.salaryTemp + `/confirm-done`, {
+          profileId: profileId.value,
+          type: empType.value,
+        })
+        .then((res) => {})
+        .catch((err) => {
+          messageError($q, err);
+        })
+        .finally(() => {
+          hideLoader();
+        });
+    },
+    "ยืนยันข้อมูลถูกต้อง",
+    "ต้องการยืนยันข้อมูลถูกต้องใช่หรือไม่"
+  );
+}
 
 /** hook เมื่อมีการเรียกใช้ Components*/
-onMounted(async () => {});
+onMounted(async () => {
+  fetchDataProfile();
+});
 </script>
 
 <template>
   <div class="row items-center q-gutter-sm q-mb-xs">
     <div class="toptitle text-dark row items-center q-py-xs">
+      <q-btn
+        icon="mdi-arrow-left"
+        unelevated
+        round
+        dense
+        flat
+        color="primary"
+        class="q-mr-sm"
+        @click="router.go(-1)"
+      />
       รายการประวัติตำแหน่ง/เงินเดือน
     </div>
   </div>
+
+  <q-card flat bordered>
+    <q-card-section class="bg-primary text-white">
+      <div class="row items-center q-col-gutter-md">
+        <div class="col-auto">
+          <q-icon name="person" size="lg" />
+        </div>
+        <div class="col">
+          <div class="text-h6">
+            {{ dataProfile?.fullName }}
+          </div>
+          <div class="text-subtitle2">{{ dataProfile?.position }}</div>
+        </div>
+      </div>
+    </q-card-section>
+
+    <q-card-section>
+      <q-list dense separator>
+        <q-item>
+          <q-item-section>
+            <q-item-label
+              ><strong>เลขประจำตัวประชาชน:</strong>
+              {{ dataProfile?.citizenId }}</q-item-label
+            >
+          </q-item-section>
+        </q-item>
+
+        <q-item>
+          <q-item-section>
+            <q-item-label
+              ><strong>เลขที่ตำแหน่ง:</strong>
+              {{ dataProfile?.posNo }}</q-item-label
+            >
+          </q-item-section>
+        </q-item>
+
+        <q-item>
+          <q-item-section>
+            <q-item-label
+              ><strong>ตำแหน่งประเภท:</strong>
+              {{ dataProfile?.posType }}</q-item-label
+            >
+          </q-item-section>
+        </q-item>
+
+        <q-item>
+          <q-item-section>
+            <q-item-label
+              ><strong>ระดับ:</strong> {{ dataProfile?.posLevel }}</q-item-label
+            >
+          </q-item-section>
+        </q-item>
+
+        <q-item>
+          <q-item-section>
+            <q-item-label
+              ><strong>สังกัด:</strong> {{ dataProfile?.org }}</q-item-label
+            >
+          </q-item-section>
+        </q-item>
+      </q-list>
+    </q-card-section>
+
+    <q-separator />
+
+    <q-card-section>
+      <div class="row q-col-gutter-sm justify-center">
+        <div class="col-2">
+          <q-btn
+            outline
+            color="public"
+            label="ยืนยันการแก้ไขสำเร็จ"
+            class="full-width"
+            @click.stop.pervent="onConfirmEdit"
+          />
+        </div>
+        <div class="col-2">
+          <q-btn
+            outline
+            color="public"
+            label="ยืนยันข้อมูลถูกต้อง"
+            class="full-width"
+            @click.stop.pervent="onConfirmDone"
+          />
+        </div>
+      </div>
+    </q-card-section>
+
+    <q-separator />
+
+    <q-card-section style="padding: 0px">
+      <q-tabs
+        v-model="tabs"
+        dense
+        align="left"
+        inline-label
+        class="bg-white text-grey"
+        active-color="primary"
+        indicator-color="primary"
+      >
+        <q-tab name="PENDING" label="รายการตำแหน่ง/เงินเดือนที่กำลังแก้ไข" />
+        <q-tab
+          name="CHECKED"
+          label="แสดงรายการตำแหน่ง/เงินเดือนหลังจากแก้ไขแล้ว"
+        />
+      </q-tabs>
+      <q-separator />
+
+      <q-tab-panels v-model="tabs" animated>
+        <q-tab-panel name="PENDING">
+          <Table :tabs="tabs" />
+        </q-tab-panel>
+        <q-tab-panel name="CHECKED">
+          <Table :tabs="tabs" />
+        </q-tab-panel>
+      </q-tab-panels>
+    </q-card-section>
+  </q-card>
 </template>
 
 <style scoped></style>

From e03d2a84a58de376add1fbb9f31eb157d1426dcd Mon Sep 17 00:00:00 2001
From: "DESKTOP-1R2VSQH\\Lenovo ThinkPad E490" <nicey2t1096@gmail.com>
Date: Fri, 21 Mar 2025 09:58:16 +0700
Subject: [PATCH 2/3] fix

---
 .../04_registryPerson/interface/index/Edit.ts | 11 +++++
 .../interface/request/Edit.ts                 |  9 ++++
 .../interface/response/Edit.ts                | 26 ++++++++++
 src/modules/04_registryPerson/stores/Edit.ts  |  7 ---
 .../views/edit/components/FormPosition.vue    | 16 +++---
 .../views/edit/components/Table.vue           |  2 +-
 .../04_registryPerson/views/edit/list.vue     | 40 +++++++++------
 .../04_registryPerson/views/edit/salary.vue   | 49 ++++++++++++++-----
 8 files changed, 117 insertions(+), 43 deletions(-)
 create mode 100644 src/modules/04_registryPerson/interface/index/Edit.ts
 create mode 100644 src/modules/04_registryPerson/interface/request/Edit.ts
 create mode 100644 src/modules/04_registryPerson/interface/response/Edit.ts

diff --git a/src/modules/04_registryPerson/interface/index/Edit.ts b/src/modules/04_registryPerson/interface/index/Edit.ts
new file mode 100644
index 000000000..c30fdac09
--- /dev/null
+++ b/src/modules/04_registryPerson/interface/index/Edit.ts
@@ -0,0 +1,11 @@
+interface DataProfile {
+  fullName: string;
+  position: string;
+  citizenId: string;
+  posNo: string;
+  posType: string;
+  posLevel: string;
+  org: string;
+}
+
+export type { DataProfile };
diff --git a/src/modules/04_registryPerson/interface/request/Edit.ts b/src/modules/04_registryPerson/interface/request/Edit.ts
new file mode 100644
index 000000000..691adc377
--- /dev/null
+++ b/src/modules/04_registryPerson/interface/request/Edit.ts
@@ -0,0 +1,9 @@
+interface DataFilter {
+  status: string;
+  empType: string;
+  keyword: string;
+  page: number;
+  pageSize: number;
+}
+
+export type { DataFilter };
diff --git a/src/modules/04_registryPerson/interface/response/Edit.ts b/src/modules/04_registryPerson/interface/response/Edit.ts
new file mode 100644
index 000000000..f3b8ec70e
--- /dev/null
+++ b/src/modules/04_registryPerson/interface/response/Edit.ts
@@ -0,0 +1,26 @@
+interface DataSalaryPos {
+  avatar: string;
+  avatarName: string;
+  citizenId: string;
+  firstName: string;
+  id: string;
+  lastName: string;
+  org: string;
+  orgRevisionId: string;
+  orgRootShortName: string;
+  posExecutive: string;
+  posLevel: string;
+  posLevelId: string;
+  posNo: string;
+  posType: string;
+  posTypeId: string;
+  position: string;
+  prefix: string;
+  rank: string;
+  root: string;
+  rootId: string;
+  statusCheckEdit: string;
+  type: string;
+}
+
+export type { DataSalaryPos };
diff --git a/src/modules/04_registryPerson/stores/Edit.ts b/src/modules/04_registryPerson/stores/Edit.ts
index 4727c2256..6e05a62a8 100644
--- a/src/modules/04_registryPerson/stores/Edit.ts
+++ b/src/modules/04_registryPerson/stores/Edit.ts
@@ -1,15 +1,8 @@
 import { ref } from "vue";
 import { defineStore } from "pinia";
-import { useQuasar } from "quasar";
-
-import { useCounterMixin } from "@/stores/mixin";
 
 import type { DataOption } from "@/modules/04_registryPerson/interface/index/Main";
 
-const $q = useQuasar();
-const mixin = useCounterMixin();
-const {} = mixin;
-
 export const useEditPosDataStore = defineStore("EditPos", () => {
   const commandCodeData = ref<DataOption[]>([]);
   const posTypeData = ref<DataOption[]>([]); //รายการประเภทตำแหน่ง | กลุ่มงาน
diff --git a/src/modules/04_registryPerson/views/edit/components/FormPosition.vue b/src/modules/04_registryPerson/views/edit/components/FormPosition.vue
index 3a6f31fe3..7275a9a03 100644
--- a/src/modules/04_registryPerson/views/edit/components/FormPosition.vue
+++ b/src/modules/04_registryPerson/views/edit/components/FormPosition.vue
@@ -308,7 +308,7 @@ function classInput(val: boolean) {
         borderless
         v-model="formData.posNo"
         hide-bottom-space
-        :label="empType === '' ? 'เลขที่ตำแหน่ง' : 'ตำแหน่งเลขที่'"
+        :label="empType === 'officer' ? 'เลขที่ตำแหน่ง' : 'ตำแหน่งเลขที่'"
       >
       </q-input>
     </div>
@@ -323,7 +323,7 @@ function classInput(val: boolean) {
         lazy-rules
         borderless
         v-model="formData.positionName"
-        :label="empType == '' ? 'ตำแหน่งในสายงาน' : 'ตำแหน่ง'"
+        :label="empType === 'officer' ? 'ตำแหน่งในสายงาน' : 'ตำแหน่ง'"
         hide-bottom-space
       />
     </div>
@@ -338,7 +338,7 @@ function classInput(val: boolean) {
         lazy-rules
         borderless
         v-model="formData.positionType"
-        :label="empType == '' ? 'ประเภทตำแหน่ง' : 'กลุ่มงาน'"
+        :label="empType === 'officer' ? 'ประเภทตำแหน่ง' : 'กลุ่มงาน'"
         emit-value
         map-options
         option-label="name"
@@ -374,7 +374,7 @@ function classInput(val: boolean) {
         lazy-rules
         borderless
         v-model="formData.positionLevel"
-        :label="empType == '' ? 'ระดับตำแหน่ง' : 'ระดับชั้นงาน'"
+        :label="empType === 'officer' ? 'ระดับตำแหน่ง' : 'ระดับชั้นงาน'"
         emit-value
         map-options
         option-label="name"
@@ -396,7 +396,7 @@ function classInput(val: boolean) {
       </q-select>
     </div>
 
-    <div class="col-xs-6 col-sm-6 col-md-4" v-if="empType == ''">
+    <div class="col-xs-6 col-sm-6 col-md-4" v-if="empType === 'officer'">
       <q-input
         :class="classInput(isReadonly)"
         :readonly="isReadonly"
@@ -411,7 +411,7 @@ function classInput(val: boolean) {
       </q-input>
     </div>
 
-    <div class="col-xs-6 col-sm-6 col-md-4" v-if="empType == ''">
+    <div class="col-xs-6 col-sm-6 col-md-4" v-if="empType === 'officer'">
       <q-select
         outlined
         :class="classInput(isReadonly)"
@@ -444,7 +444,7 @@ function classInput(val: boolean) {
       >
     </div>
 
-    <div class="col-xs-6 col-sm-6 col-md-4" v-if="empType == ''">
+    <div class="col-xs-6 col-sm-6 col-md-4" v-if="empType === 'officer'">
       <q-select
         :class="classInput(isReadonly)"
         :readonly="isReadonly"
@@ -477,7 +477,7 @@ function classInput(val: boolean) {
       </q-select>
     </div>
 
-    <div class="col-xs-6 col-sm-6 col-md-4" v-if="empType == ''">
+    <div class="col-xs-6 col-sm-6 col-md-4" v-if="empType === 'officer'">
       <q-select
         :class="classInput(isReadonly)"
         :readonly="isReadonly"
diff --git a/src/modules/04_registryPerson/views/edit/components/Table.vue b/src/modules/04_registryPerson/views/edit/components/Table.vue
index 2458b2df4..359ae8048 100644
--- a/src/modules/04_registryPerson/views/edit/components/Table.vue
+++ b/src/modules/04_registryPerson/views/edit/components/Table.vue
@@ -367,7 +367,7 @@ function classColorRow(isDelete: boolean, isEdit: boolean, isEntry: boolean) {
   return isDelete
     ? "text-red"
     : isEdit
-    ? "text-yellow-8"
+    ? "text-orange"
     : isEntry
     ? "text-grey"
     : "";
diff --git a/src/modules/04_registryPerson/views/edit/list.vue b/src/modules/04_registryPerson/views/edit/list.vue
index 78f8726b4..b98e2ccf6 100644
--- a/src/modules/04_registryPerson/views/edit/list.vue
+++ b/src/modules/04_registryPerson/views/edit/list.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { ref, reactive, onMounted, watch, defineAsyncComponent } from "vue";
+import { ref, reactive, onMounted } from "vue";
 import { useQuasar } from "quasar";
 
 import http from "@/plugins/http";
@@ -9,20 +9,27 @@ import { useRoute, useRouter } from "vue-router";
 
 /** importType*/
 import type { QTableColumn } from "quasar";
+import type { DataStructureTree } from "@/interface/main";
+import type {
+  DataOption,
+  Pagination,
+} from "@/modules/04_registryPerson/interface/index/Main";
+import type { DataSalaryPos } from "@/modules/04_registryPerson/interface/response/Edit";
+import type { DataFilter } from "@/modules/04_registryPerson/interface/request/Edit";
 
 const $q = useQuasar();
 const { showLoader, hideLoader, messageError } = useCounterMixin();
 const route = useRoute();
 const router = useRouter();
 
-const organizationOps = ref<any[]>([]);
-const organizationOpsMain = ref<any[]>([]);
-const employeeClassOpsMain = ref<any[]>([
+const organizationOps = ref<DataOption[]>([]);
+const organizationOpsMain = ref<DataOption[]>([]);
+const employeeClassOpsMain = ref<DataOption[]>([
   { id: "officer", name: "ข้าราชการ กทม.สามัญ" },
   { id: "employee", name: "ลูกจ้างประจำ" },
 ]);
-const employeeClassOps = ref<any[]>(employeeClassOpsMain.value);
-const statusOpsMain = ref<any[]>([
+const employeeClassOps = ref<DataOption[]>(employeeClassOpsMain.value);
+const statusOpsMain = ref<DataOption[]>([
   {
     id: "ALL",
     name: "ทั้งหมด",
@@ -40,11 +47,11 @@ const statusOpsMain = ref<any[]>([
     name: "ตรวจสอบแล้ว",
   },
 ]);
-const statusOps = ref<any[]>(statusOpsMain.value);
+const statusOps = ref<DataOption[]>(statusOpsMain.value);
 
 //Table
 const organization = ref<string>("");
-const filter = reactive({
+const filter = reactive<DataFilter>({
   status: "ALL",
   empType: "officer",
   keyword: "",
@@ -53,7 +60,7 @@ const filter = reactive({
 });
 const total = ref<number>(0);
 const maxPage = ref<number>(0);
-const rows = ref<any[]>([]);
+const rows = ref<DataSalaryPos[]>([]);
 const columns = ref<QTableColumn[]>([
   {
     name: "posNo",
@@ -174,7 +181,7 @@ function fetchListOrg(id: string) {
   http
     .get(config.API.orgByIdSystem(id, route.meta.Key as string))
     .then(async (res) => {
-      const data = await res.data.result.map((item: any) => ({
+      const data = await res.data.result.map((item: DataStructureTree) => ({
         id: item.orgTreeId,
         name: item.orgName,
       }));
@@ -200,14 +207,14 @@ function filterSelector(val: string, update: Function, type: string) {
     case "organization":
       update(() => {
         organizationOps.value = organizationOpsMain.value.filter(
-          (v: any) => v.name.toLowerCase().indexOf(val) > -1
+          (v: DataOption) => v.name.toLowerCase().indexOf(val) > -1
         );
       });
       break;
     case "employeeClass":
       update(() => {
         employeeClassOps.value = employeeClassOpsMain.value.filter(
-          (v: any) => v.name.toLowerCase().indexOf(val) > -1
+          (v: DataOption) => v.name.toLowerCase().indexOf(val) > -1
         );
       });
       break;
@@ -215,7 +222,7 @@ function filterSelector(val: string, update: Function, type: string) {
     case "status":
       update(() => {
         statusOps.value = statusOpsMain.value.filter(
-          (v: any) => v.name.toLowerCase().indexOf(val) > -1
+          (v: DataOption) => v.name.toLowerCase().indexOf(val) > -1
         );
       });
       break;
@@ -271,11 +278,16 @@ function onSearchData(val: boolean = true) {
  * function เปลี่ยนแถวต่อหน้า
  * @param newPagination ข้อมูล Pagination
  */
-function updatePageSize(newPagination: any) {
+function updatePageSize(newPagination: Pagination) {
   filter.pageSize = newPagination.rowsPerPage;
   onSearchData();
 }
 
+/**
+ * function ไปหน้ารายการประวัติตำแหน่ง/เงินเดือน
+ * @param id ProfileID
+ * @param type ประเภทของข้าราชการ
+ */
 function onRedirectToPosition(id: string, type: string) {
   const tyepeLower = type?.toLocaleLowerCase();
   router.push(`/registry/edit/salary/${tyepeLower}/${id}`);
diff --git a/src/modules/04_registryPerson/views/edit/salary.vue b/src/modules/04_registryPerson/views/edit/salary.vue
index 07f297ed5..4cd5cbf50 100644
--- a/src/modules/04_registryPerson/views/edit/salary.vue
+++ b/src/modules/04_registryPerson/views/edit/salary.vue
@@ -1,29 +1,35 @@
 <script setup lang="ts">
-import { ref, reactive, onMounted, watch, defineAsyncComponent } from "vue";
+import { ref, onMounted } from "vue";
 import { useQuasar } from "quasar";
 
 import http from "@/plugins/http";
 import config from "@/app.config";
-import { useRegistryNewDataStore } from "@/modules/04_registryPerson/store";
 import { useCounterMixin } from "@/stores/mixin";
 import { useRoute, useRouter } from "vue-router";
 
 /** importType*/
+import type { DataProfile } from "@/modules/04_registryPerson/interface/index/Edit";
 
 import Table from "@/modules/04_registryPerson/views/edit/components/Table.vue";
 
 const $q = useQuasar();
-const store = useRegistryNewDataStore();
-const { showLoader, hideLoader, messageError, dialogConfirm, findOrgName } =
-  useCounterMixin();
+const {
+  showLoader,
+  hideLoader,
+  messageError,
+  dialogConfirm,
+  findOrgName,
+  success,
+} = useCounterMixin();
 const route = useRoute();
 const router = useRouter();
 
-const dataProfile = ref<any>();
+const dataProfile = ref<DataProfile>();
 const tabs = ref<string>("PENDING");
 const empType = ref<string>(route.params.type.toString());
 const profileId = ref<string>(route.params.id.toString());
 
+/** funtion*/
 async function fetchDataProfile() {
   showLoader();
   await http
@@ -52,6 +58,7 @@ async function fetchDataProfile() {
     });
 }
 
+/** function ยืนยันเสร็จสิ้นการแก้ไข*/
 function onConfirmEdit() {
   dialogConfirm(
     $q,
@@ -60,9 +67,11 @@ function onConfirmEdit() {
       http
         .post(config.API.salaryTemp + `/confirm-edit`, {
           profileId: profileId.value,
-          type: empType.value,
+          type: empType.value?.toLocaleUpperCase(),
+        })
+        .then(() => {
+          success($q, "ยืนยันเสร็จสิ้นการแก้ไขสำเร็จ");
         })
-        .then((res) => {})
         .catch((err) => {
           messageError($q, err);
         })
@@ -75,6 +84,7 @@ function onConfirmEdit() {
   );
 }
 
+/** function ยืนยันข้อมูลถูกต้อง*/
 function onConfirmDone() {
   dialogConfirm(
     $q,
@@ -83,9 +93,11 @@ function onConfirmDone() {
       http
         .post(config.API.salaryTemp + `/confirm-done`, {
           profileId: profileId.value,
-          type: empType.value,
+          type: empType.value?.toLocaleUpperCase(),
+        })
+        .then(() => {
+          success($q, "ยืนยันข้อมูลถูกต้องสำเร็จ");
         })
-        .then((res) => {})
         .catch((err) => {
           messageError($q, err);
         })
@@ -150,7 +162,11 @@ onMounted(async () => {
         <q-item>
           <q-item-section>
             <q-item-label
-              ><strong>เลขที่ตำแหน่ง:</strong>
+              ><strong
+                >{{
+                  empType === "officer" ? "เลขที่ตำแหน่ง:" : "ตำแหน่งเลขที่:"
+                }}
+              </strong>
               {{ dataProfile?.posNo }}</q-item-label
             >
           </q-item-section>
@@ -159,7 +175,11 @@ onMounted(async () => {
         <q-item>
           <q-item-section>
             <q-item-label
-              ><strong>ตำแหน่งประเภท:</strong>
+              ><strong>
+                {{
+                  empType === "officer" ? "ตำแหน่งประเภท:" : "กลุ่มงาน:"
+                }}</strong
+              >
               {{ dataProfile?.posType }}</q-item-label
             >
           </q-item-section>
@@ -168,7 +188,10 @@ onMounted(async () => {
         <q-item>
           <q-item-section>
             <q-item-label
-              ><strong>ระดับ:</strong> {{ dataProfile?.posLevel }}</q-item-label
+              ><strong>{{
+                empType === "officer" ? "ระดับ:" : "ระดับชั้นงาน:"
+              }}</strong>
+              {{ dataProfile?.posLevel }}</q-item-label
             >
           </q-item-section>
         </q-item>

From cc0c600174d1f30de230cf5142165bc8800fc6ab Mon Sep 17 00:00:00 2001
From: "DESKTOP-1R2VSQH\\Lenovo ThinkPad E490" <nicey2t1096@gmail.com>
Date: Fri, 21 Mar 2025 11:53:41 +0700
Subject: [PATCH 3/3] =?UTF-8?q?=E0=B9=81=E0=B8=81=E0=B9=89=E0=B9=84?=
 =?UTF-8?q?=E0=B8=82=E0=B8=95=E0=B8=B3=E0=B9=81=E0=B8=AB=E0=B8=99=E0=B9=88?=
 =?UTF-8?q?=E0=B8=87=E0=B9=80=E0=B8=87=E0=B8=B4=E0=B8=99=E0=B9=80=E0=B8=94?=
 =?UTF-8?q?=E0=B8=B7=E0=B8=AD=E0=B8=99?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../interface/request/Edit.ts                 |  29 +++-
 .../interface/response/Edit.ts                |  49 +++++-
 src/modules/04_registryPerson/stores/Edit.ts  |   3 +
 .../views/edit/components/DialogForm.vue      | 144 ++++++++++++------
 .../views/edit/components/FormPosition.vue    |  17 +--
 .../views/edit/components/Table.vue           |  66 ++++----
 .../04_registryPerson/views/edit/list.vue     |  29 ++--
 .../04_registryPerson/views/edit/salary.vue   |  26 +++-
 8 files changed, 255 insertions(+), 108 deletions(-)

diff --git a/src/modules/04_registryPerson/interface/request/Edit.ts b/src/modules/04_registryPerson/interface/request/Edit.ts
index 691adc377..57eaa9b24 100644
--- a/src/modules/04_registryPerson/interface/request/Edit.ts
+++ b/src/modules/04_registryPerson/interface/request/Edit.ts
@@ -6,4 +6,31 @@ interface DataFilter {
   pageSize: number;
 }
 
-export type { DataFilter };
+interface FormDataSalary {
+  commandCode: string; //ประเภทคำสั่ง
+  commandNo: string; //เลขที่คำสั่ง
+  commandYear: number | null; //ปี
+  commandDateAffect: Date | null; //วันที่มีผล
+  commandDateSign: Date | null; //วันที่ลงนาม
+  posNoAbb: string; //ตัวย่อเลขที่ตำแหน่ง
+  posNo: string; //เลขที่ตำแหน่ง
+  positionName: string; //ตำแหน่ง
+  positionType: string; //ประเภทตำแหน่ง, กลุ่มงาน
+  positionLevel: string; //ระดับตำแหน่ง, ระดับชั้นงาน
+  positionCee: string; //ระดับซี
+  positionLine: string; // สายงาน
+  positionPathSide: string; //ด้าน/สาขา
+  positionExecutive: string; //ตำแหน่งทางการบริหาร
+  amount: number | null; //เงินเดือน
+  amountSpecial: number | null; //เงินค่าตอบแทนพิเศษ
+  positionSalaryAmount: number | null; //เงินประจำตำแหน่ง
+  mouthSalaryAmount: number | null; //เงินค่าตอบแทนรายเดือน
+  orgRoot: string; //หน่วยงาน
+  orgChild1: string; //ส่วนราชการระดับ 1
+  orgChild2: string; //ส่วนราชการระดับ 2
+  orgChild3: string; //ส่วนราชการระดับ 3
+  orgChild4: string; //ส่วนราชการระดับ 4
+  remark: string; //หมายเหตุstring
+}
+
+export type { DataFilter, FormDataSalary };
diff --git a/src/modules/04_registryPerson/interface/response/Edit.ts b/src/modules/04_registryPerson/interface/response/Edit.ts
index f3b8ec70e..f27f8e890 100644
--- a/src/modules/04_registryPerson/interface/response/Edit.ts
+++ b/src/modules/04_registryPerson/interface/response/Edit.ts
@@ -23,4 +23,51 @@ interface DataSalaryPos {
   type: string;
 }
 
-export type { DataSalaryPos };
+interface DataPosition {
+  amount: number;
+  amountSpecial: number;
+  commandCode: string;
+  commandDateAffect: string;
+  commandDateSign: string;
+  commandId: string;
+  commandName: string;
+  commandNo: string;
+  commandYear: number;
+  createdAt: string;
+  createdFullName: string;
+  createdUserId: string;
+  dateGovernment: string;
+  id: string;
+  isDelete: boolean;
+  isEdit: boolean;
+  isEntry: boolean;
+  isGovernment: string;
+  lastUpdateFullName: string;
+  lastUpdateUserId: string;
+  lastUpdatedAt: string;
+  mouthSalaryAmount: number;
+  order: number;
+  orgChild1: string;
+  orgChild2: string;
+  orgChild3: string;
+  orgChild4: string;
+  orgRoot: string;
+  posNo: string;
+  posNoAbb: string;
+  positionCee: string;
+  positionExecutive: string;
+  positionLevel: string;
+  positionLine: string;
+  positionName: string;
+  positionPathSide: string;
+  positionSalaryAmount: number;
+  positionType: string;
+  profileEmployeeId: string;
+  profileId: string;
+  refId: number;
+  remark: string;
+  salaryId: string;
+  status: string;
+}
+
+export type { DataSalaryPos, DataPosition };
diff --git a/src/modules/04_registryPerson/stores/Edit.ts b/src/modules/04_registryPerson/stores/Edit.ts
index 6e05a62a8..3d3f7cc4d 100644
--- a/src/modules/04_registryPerson/stores/Edit.ts
+++ b/src/modules/04_registryPerson/stores/Edit.ts
@@ -4,6 +4,8 @@ import { defineStore } from "pinia";
 import type { DataOption } from "@/modules/04_registryPerson/interface/index/Main";
 
 export const useEditPosDataStore = defineStore("EditPos", () => {
+  
+  const orgData = ref<DataOption[]>([]);
   const commandCodeData = ref<DataOption[]>([]);
   const posTypeData = ref<DataOption[]>([]); //รายการประเภทตำแหน่ง | กลุ่มงาน
   const posLevelData = ref<DataOption[]>([]); //รายการระดับตำแหน่ง | ระดับชั้นงาน
@@ -25,6 +27,7 @@ export const useEditPosDataStore = defineStore("EditPos", () => {
     posLineData,
     posPathSideData,
     posExecutiveData,
+    orgData,
 
     // Function
     convertCommandCodeName,
diff --git a/src/modules/04_registryPerson/views/edit/components/DialogForm.vue b/src/modules/04_registryPerson/views/edit/components/DialogForm.vue
index b71b595da..d2ff12992 100644
--- a/src/modules/04_registryPerson/views/edit/components/DialogForm.vue
+++ b/src/modules/04_registryPerson/views/edit/components/DialogForm.vue
@@ -8,6 +8,15 @@ import http from "@/plugins/http";
 import config from "@/app.config";
 
 import type { DataOption } from "@/modules/04_registryPerson/interface/index/Main";
+import type { DataPosition } from "@/modules/04_registryPerson/interface/response/Edit";
+import type { FormDataSalary } from "@/modules/04_registryPerson/interface/request/Edit";
+import type {
+  DataCommandCode,
+  DataPosType,
+  DataPosLevel,
+  DataPosPosition,
+  DataPosExecutive,
+} from "@/modules/04_registryPerson/interface/response/Position";
 
 import DialogHeader from "@/components/DialogHeader.vue";
 import FormPosition from "@/modules/04_registryPerson/views/edit/components/FormPosition.vue";
@@ -19,21 +28,20 @@ const {
   hideLoader,
   messageError,
   success,
-
   convertDateToAPI,
 } = useCounterMixin();
 const store = useEditPosDataStore();
 
 const modal = defineModel<boolean>("modal", { required: true });
 const empType = defineModel<string>("empType", { required: true });
-const rowData = defineModel<any[]>("rowData", { required: true });
+const rowData = defineModel<DataPosition[]>("rowData", { required: true });
 const rowIndex = defineModel<number>("rowIndex", { required: true });
 
 const props = defineProps({
   fetchData: { type: Function, required: true },
 });
 
-const formData = reactive({
+const formData = reactive<FormDataSalary>({
   commandCode: "", //ประเภทคำสั่ง
   commandNo: "", //เลขที่คำสั่ง
   commandYear: null, //ปี
@@ -59,7 +67,7 @@ const formData = reactive({
   orgChild4: "", //ส่วนราชการระดับ 4
   remark: "", //หมายเหตุ
 });
-const formReadonly = reactive({
+const formReadonly = reactive<FormDataSalary>({
   commandCode: "", //ประเภทคำสั่ง
   commandNo: "", //เลขที่คำสั่ง
   commandYear: null, //ปี
@@ -86,7 +94,7 @@ const formReadonly = reactive({
   remark: "", //หมายเหตุ
 });
 
-const dataLevel = ref<any[]>([]); //รายการ ตำแหน่งเงินเดือน
+const dataLevel = ref<DataPosType[]>([]); //รายการ ตำแหน่งเงินเดือน
 const commandCodeOptions = ref<DataOption[]>(store.commandCodeData); //รายการปรเภทคำสั่ง
 const posTypeOptions = ref<DataOption[]>(store.posTypeData); //รายการประเภทตำแหน่ง | กลุ่มงาน
 const posLevelOptions = ref<DataOption[]>(store.posLevelData); //รายการระดับตำแหน่ง | ระดับชั้นงาน
@@ -98,12 +106,15 @@ const salaryId = ref<string>("");
 
 async function fetchDataPosition() {
   try {
+    showLoader();
     const res = await http.get(
       config.API.salaryTemp + `/get/${salaryId.value}`
     );
     return res.data.result;
   } catch (err) {
     messageError($q, err);
+  } finally {
+    hideLoader();
   }
 }
 
@@ -115,7 +126,7 @@ async function fetchDataCommandCode() {
     .then((res) => {
       const data = res.data.result;
 
-      store.commandCodeData = data.map((e: any) => ({
+      store.commandCodeData = data.map((e: DataCommandCode) => ({
         id: e.code.toString(),
         name: e.name,
       }));
@@ -133,7 +144,7 @@ async function fetchType() {
     .get(config.API.orgPosType)
     .then((res) => {
       dataLevel.value = res.data.result;
-      store.posTypeData = res.data.result.map((e: any) => ({
+      store.posTypeData = res.data.result.map((e: DataPosType) => ({
         id: e.id,
         name: e.posTypeName,
       }));
@@ -150,7 +161,7 @@ async function fetchOptionGroup() {
     .get(config.API.orgEmployeeType)
     .then((res) => {
       dataLevel.value = res.data.result;
-      store.posTypeData = res.data.result.map((e: any) => ({
+      store.posTypeData = res.data.result.map((e: DataPosType) => ({
         id: e.id,
         name: e.posTypeName,
       }));
@@ -174,7 +185,7 @@ async function fetchDataOption() {
       const seen = new Set();
       const seen2 = new Set();
 
-      const listPositionField = data.filter((item: any) => {
+      const listPositionField = data.filter((item: DataPosPosition) => {
         if (seen.has(item.positionField)) {
           return false;
         } else {
@@ -182,12 +193,12 @@ async function fetchDataOption() {
           return true;
         }
       });
-      store.posLineData = listPositionField.map((e: any) => ({
+      store.posLineData = listPositionField.map((e: DataPosPosition) => ({
         id: e.positionField,
         name: e.positionField,
       }));
 
-      const listPositionArea = data.filter((item: any) => {
+      const listPositionArea = data.filter((item: DataPosPosition) => {
         if (
           item.positionArea === null ||
           item.positionArea === "" ||
@@ -200,7 +211,7 @@ async function fetchDataOption() {
           return true;
         }
       });
-      store.posPathSideData = listPositionArea.map((e: any) => ({
+      store.posPathSideData = listPositionArea.map((e: DataPosPosition) => ({
         id: e.positionArea,
         name: e.positionArea,
       }));
@@ -216,7 +227,7 @@ async function fetchDataOptionExecutive() {
     .get(config.API.orgPosExecutive)
     .then((res) => {
       const data = res.data.result;
-      store.posExecutiveData = data.map((e: any) => ({
+      store.posExecutiveData = data.map((e: DataPosExecutive) => ({
         id: e.posExecutiveName,
         name: e.posExecutiveName,
       }));
@@ -233,11 +244,11 @@ async function fetchDataOptionExecutive() {
  */
 async function updateSelectType(val: string, status: boolean = false) {
   const listLevel = val
-    ? dataLevel.value.find((e: any) => e.posTypeName === val)
+    ? dataLevel.value.find((e: DataPosType) => e.posTypeName === val)
     : null;
 
   if (listLevel) {
-    store.posLevelData = listLevel.posLevels.map((e: any) => ({
+    store.posLevelData = listLevel.posLevels.map((e: DataPosLevel) => ({
       id: e.id,
       name:
         empType.value === "officer"
@@ -393,7 +404,7 @@ onMounted(async () => {
     <q-card>
       <q-form greedy @submit.prevent @validation-success="onSubmit">
         <DialogHeader
-          :tittle="'แก้ไขตำแหน่งเงินเดือนเงินเดือน'"
+          :tittle="'แก้ไขตำแหน่ง/เงินเดือน'"
           :close="onClickCloseDialog"
         />
         <q-separator />
@@ -402,18 +413,32 @@ onMounted(async () => {
           <div class="col-12 row">
             <div class="col-xs-12 col-md-6 row no-wrap">
               <div class="col-12 q-pa-md">
-                <FormPosition
-                  :is-readonly="true"
-                  :form-data="formReadonly"
-                  :command-code-options="commandCodeOptions"
-                  :pos-type-options="posTypeOptions"
-                  :pos-level-options="posLevelOptions"
-                  :pos-line-options="posLineOptions"
-                  :pos-path-side-options="posPathSideOptions"
-                  :pos-executive-options="posExecutiveOptions"
-                  :emp-type="empType"
-                  :update-select-type="updateSelectType"
-                />
+                <q-card
+                  bordered
+                  class="col-12"
+                  style="border: 1px solid #d6dee1"
+                >
+                  <div
+                    class="col-12 text-weight-medium bg-grey-1 q-py-xs q-px-md"
+                  >
+                    ข้อมูลปัจุบัน
+                  </div>
+                  <div class="col-12"><q-separator /></div>
+                  <q-card-section>
+                    <FormPosition
+                      :is-readonly="true"
+                      :form-data="formReadonly"
+                      :command-code-options="commandCodeOptions"
+                      :pos-type-options="posTypeOptions"
+                      :pos-level-options="posLevelOptions"
+                      :pos-line-options="posLineOptions"
+                      :pos-path-side-options="posPathSideOptions"
+                      :pos-executive-options="posExecutiveOptions"
+                      :emp-type="empType"
+                      :update-select-type="updateSelectType"
+                    />
+                  </q-card-section>
+                </q-card>
               </div>
               <div class="col-12 row">
                 <q-separator :vertical="!$q.screen.lt.md" />
@@ -422,18 +447,34 @@ onMounted(async () => {
 
             <div class="col-xs-12 col-md-6 row">
               <div class="col-12 q-pa-md">
-                <FormPosition
-                  :is-readonly="false"
-                  v-model:form-data="formData"
-                  v-model:command-code-options="commandCodeOptions"
-                  v-model:pos-type-options="posTypeOptions"
-                  v-model:pos-level-options="posLevelOptions"
-                  v-model:pos-line-options="posLineOptions"
-                  v-model:pos-path-side-options="posPathSideOptions"
-                  v-model:pos-executive-options="posExecutiveOptions"
-                  :emp-type="empType"
-                  :update-select-type="updateSelectType"
-                />
+                <q-card
+                  bordered
+                  class="col-12"
+                  style="border: 1px solid #d6dee1"
+                >
+                  <div
+                    class="col-12 text-weight-medium bg-grey-1 q-py-xs q-px-md"
+                  >
+                    ข้อมูลที่แก้ไข
+                  </div>
+                  <div class="col-12">
+                    <q-separator />
+                    <q-card-section>
+                      <FormPosition
+                        :is-readonly="false"
+                        v-model:form-data="formData"
+                        v-model:command-code-options="commandCodeOptions"
+                        v-model:pos-type-options="posTypeOptions"
+                        v-model:pos-level-options="posLevelOptions"
+                        v-model:pos-line-options="posLineOptions"
+                        v-model:pos-path-side-options="posPathSideOptions"
+                        v-model:pos-executive-options="posExecutiveOptions"
+                        :emp-type="empType"
+                        :update-select-type="updateSelectType"
+                      />
+                    </q-card-section>
+                  </div>
+                </q-card>
               </div>
             </div>
           </div>
@@ -442,26 +483,29 @@ onMounted(async () => {
         <q-separator />
 
         <q-card-actions align="right">
-          <q-btn label="บันทึก" id="onSubmit" type="submit" color="public">
-            <q-tooltip>บันทึกข้อมูล</q-tooltip>
-          </q-btn>
           <q-btn
+            flat
+            round
             :disable="rowIndex === 0"
-            label="ก่อนหน้า"
-            color="public"
-            icon="mdi-arrow-left"
+            :color="rowIndex === 0 ? 'grey' : 'public'"
+            icon="mdi-chevron-left"
             @click.stop.pervent="onNavigateRow('previous')"
           >
-            <q-tooltip>บันทึกข้อมูล</q-tooltip>
+            <q-tooltip>ข้อมูลก่อนหน้า</q-tooltip>
           </q-btn>
 
           <q-btn
+            flat
+            round
             :disable="rowIndex + 1 === rowData.length"
-            label="ถัดไป"
-            color="public"
-            icon-right="mdi-arrow-right"
+            :color="rowIndex + 1 === rowData.length ? 'grey' : 'public'"
+            icon="mdi-chevron-right"
             @click.stop.pervent="onNavigateRow('next')"
           >
+            <q-tooltip>ข้อมูลถัดไป</q-tooltip>
+          </q-btn>
+
+          <q-btn label="บันทึก" id="onSubmit" type="submit" color="public">
             <q-tooltip>บันทึกข้อมูล</q-tooltip>
           </q-btn>
         </q-card-actions>
diff --git a/src/modules/04_registryPerson/views/edit/components/FormPosition.vue b/src/modules/04_registryPerson/views/edit/components/FormPosition.vue
index 7275a9a03..2ef968e86 100644
--- a/src/modules/04_registryPerson/views/edit/components/FormPosition.vue
+++ b/src/modules/04_registryPerson/views/edit/components/FormPosition.vue
@@ -5,23 +5,14 @@ import { useCounterMixin } from "@/stores/mixin";
 import { useEditPosDataStore } from "@/modules/04_registryPerson/stores/Edit";
 
 import type { DataOption } from "@/modules/04_registryPerson/interface/index/Main";
+import type { FormDataSalary } from "@/modules/04_registryPerson/interface/request/Edit";
 
-const {
-  date2Thai,
-  dialogConfirm,
-  showLoader,
-  hideLoader,
-  messageError,
-  success,
-  pathRegistryEmp,
-  onSearchDataTable,
-  convertDateToAPI,
-} = useCounterMixin();
+const { date2Thai } = useCounterMixin();
 const store = useEditPosDataStore();
 
 const isReadonly = defineModel<boolean>("isReadonly", { required: true });
 const empType = defineModel<string>("empType", { required: true });
-const formData = defineModel<any>("formData", { required: true });
+const formData = defineModel<FormDataSalary>("formData", { required: true });
 const commandCodeOptions = defineModel<DataOption[]>("commandCodeOptions", {
   required: true,
 });
@@ -209,7 +200,7 @@ function classInput(val: boolean) {
             autoApply
             year-picker
             :enableTimePicker="false"
-            class="inputgreen"
+            :class="classInput(isReadonly)"
             :readonly="isReadonly"
           >
             <template #year="{ year }">{{ year + 543 }}</template>
diff --git a/src/modules/04_registryPerson/views/edit/components/Table.vue b/src/modules/04_registryPerson/views/edit/components/Table.vue
index 359ae8048..ce9215dbb 100644
--- a/src/modules/04_registryPerson/views/edit/components/Table.vue
+++ b/src/modules/04_registryPerson/views/edit/components/Table.vue
@@ -1,27 +1,21 @@
 <script setup lang="ts">
-import { ref, reactive, onMounted, computed } from "vue";
+import { ref, onMounted, computed } from "vue";
 import { useQuasar } from "quasar";
 
 import http from "@/plugins/http";
 import config from "@/app.config";
-import { useCounterMixin } from "@/stores/mixin";
 import { useRoute } from "vue-router";
-
+import { useCounterMixin } from "@/stores/mixin";
 import { useEditPosDataStore } from "@/modules/04_registryPerson/stores/Edit";
 
-const route = useRoute();
-const store = useEditPosDataStore();
-
-const empType = ref<string>(route.params.type.toString());
-const profileId = ref<string>(route.params.id.toString());
-
-const tabs = defineModel<string>("tabs", { required: true });
-
 import type { QTableColumn } from "quasar";
+import type { DataPosition } from "@/modules/04_registryPerson/interface/response/Edit";
 
 import DialogForm from "@/modules/04_registryPerson/views/edit/components/DialogForm.vue";
 
 const $q = useQuasar();
+const route = useRoute();
+const store = useEditPosDataStore();
 const {
   date2Thai,
   findOrgName,
@@ -33,11 +27,19 @@ const {
   success,
 } = useCounterMixin();
 
+const empType = ref<string>(route.params.type.toString());
+const profileId = ref<string>(route.params.id.toString());
+
+const tabs = defineModel<string>("tabs", { required: true });
+const statusCheckEdit = defineModel<string>("statusCheckEdit", {
+  required: true,
+});
+
 //Table
 const isLoad = ref<boolean>(true);
 const rowIndex = ref<number>(0);
-const rows = ref<any[]>([]);
-const rowsMain = ref<any[]>([]);
+const rows = ref<DataPosition[]>([]);
+const rowsMain = ref<DataPosition[]>([]);
 const keyword = ref<string>("");
 const baseColumns = ref<QTableColumn[]>([
   {
@@ -291,6 +293,7 @@ const columns = computed<QTableColumn[]>(() => {
 
 const modal = ref<boolean>(false);
 
+/** function fetch ข้อมูลรายการตำแหน่งเงินเดือน*/
 async function fetchData() {
   isLoad.value = true;
   rowsMain.value = [];
@@ -314,6 +317,7 @@ async function fetchData() {
     });
 }
 
+/** function ค้นหาข้อมูลรายการในตาราง*/
 function serchDataTable() {
   rows.value = onSearchDataTable(
     keyword.value,
@@ -322,6 +326,10 @@ function serchDataTable() {
   );
 }
 
+/**
+ * funciton
+ * @param index
+ */
 function onEditData(index: number) {
   rowIndex.value = index;
   modal.value = true;
@@ -342,11 +350,12 @@ async function onSwapData(action: string, id: string) {
     });
 }
 
-function onDeleteData(id: string) {
+function onDeleteData(id: string, isDelete: boolean) {
   dialogRemove($q, async () => {
     showLoader();
+    const path = isDelete ? "/delete-renew" : "/delete";
     await http
-      .post(config.API.salaryTemp + `/delete`, {
+      .post(config.API.salaryTemp + `${path}`, {
         type: empType.value,
         salaryId: id,
       })
@@ -436,7 +445,7 @@ onMounted(() => {
         </template>
         <template v-slot:body="props">
           <q-tr :props="props">
-            <q-td v-if="tabs === 'PENDING'">
+            <q-td v-if="tabs === 'PENDING' && statusCheckEdit !== 'CHECKED'">
               <q-btn
                 dense
                 flat
@@ -471,23 +480,28 @@ onMounted(() => {
                 flat
                 dense
                 round
-                icon="delete"
-                :color="props.row.isDelete ? 'grey' : 'red'"
-                :disable="props.row.isDelete"
-                @click.stop.pervent="onDeleteData(props.row.id)"
+                :icon="props.row.isDelete ? 'mdi-refresh-circle' : 'delete'"
+                :color="props.row.isDelete ? 'orange' : 'red'"
+                @click.stop.pervent="
+                  onDeleteData(props.row.id, props.row.isDelete)
+                "
               >
-                <q-tooltip>ลบ</q-tooltip>
+                <q-tooltip>{{
+                  props.row.isDelete ? "ย้อนกลับข้อมูล" : "ลบ"
+                }}</q-tooltip>
               </q-btn>
             </q-td>
             <q-td
               v-for="col in props.cols"
               :key="col.id"
               :class="
-                classColorRow(
-                  props.row.isDelete,
-                  props.row.isEdit,
-                  props.row.isEntry
-                )
+                tabs === 'PENDING'
+                  ? classColorRow(
+                      props.row.isDelete,
+                      props.row.isEdit,
+                      props.row.isEntry
+                    )
+                  : ''
               "
             >
               <div
diff --git a/src/modules/04_registryPerson/views/edit/list.vue b/src/modules/04_registryPerson/views/edit/list.vue
index b98e2ccf6..3a11f2206 100644
--- a/src/modules/04_registryPerson/views/edit/list.vue
+++ b/src/modules/04_registryPerson/views/edit/list.vue
@@ -6,6 +6,7 @@ import http from "@/plugins/http";
 import config from "@/app.config";
 import { useCounterMixin } from "@/stores/mixin";
 import { useRoute, useRouter } from "vue-router";
+import { useEditPosDataStore } from "@/modules/04_registryPerson/stores/Edit";
 
 /** importType*/
 import type { QTableColumn } from "quasar";
@@ -18,9 +19,10 @@ import type { DataSalaryPos } from "@/modules/04_registryPerson/interface/respon
 import type { DataFilter } from "@/modules/04_registryPerson/interface/request/Edit";
 
 const $q = useQuasar();
-const { showLoader, hideLoader, messageError } = useCounterMixin();
 const route = useRoute();
 const router = useRouter();
+const store = useEditPosDataStore();
+const { showLoader, hideLoader, messageError } = useCounterMixin();
 
 const organizationOps = ref<DataOption[]>([]);
 const organizationOpsMain = ref<DataOption[]>([]);
@@ -160,14 +162,16 @@ const visibleColumns = ref<string[]>([
 /** function fetch ข้อมูลโครงสร้างปัจจุบัน*/
 async function fetchActiveOrg() {
   showLoader();
-  http
+  await http
     .get(config.API.activeOrganization)
-    .then((res) => {
+    .then(async (res) => {
       const data = res.data.result;
-      fetchListOrg(data.activeId);
+      await fetchListOrg(data.activeId);
     })
     .catch((err) => {
       messageError($q, err);
+    })
+    .finally(() => {
       hideLoader();
     });
 }
@@ -176,17 +180,17 @@ async function fetchActiveOrg() {
  * function fetch ข้อมูลหน่วยงาน
  * @param id โครงสร้างปัจจุบัน
  */
-function fetchListOrg(id: string) {
+async function fetchListOrg(id: string) {
   showLoader();
-  http
+  await http
     .get(config.API.orgByIdSystem(id, route.meta.Key as string))
     .then(async (res) => {
-      const data = await res.data.result.map((item: DataStructureTree) => ({
+      store.orgData = await res.data.result.map((item: DataStructureTree) => ({
         id: item.orgTreeId,
         name: item.orgName,
       }));
-      organizationOpsMain.value = data;
-      organizationOps.value = data;
+      organizationOpsMain.value = store.orgData;
+      organizationOps.value = store.orgData;
     })
     .catch((err) => {
       messageError($q, err);
@@ -295,7 +299,12 @@ function onRedirectToPosition(id: string, type: string) {
 
 /** hook เมื่อมีการเรียกใช้ Components*/
 onMounted(async () => {
-  await fetchActiveOrg();
+  if (store.orgData.length === 0) {
+    await fetchActiveOrg();
+  } else {
+    organizationOpsMain.value = store.orgData;
+    organizationOps.value = store.orgData;
+  }
 });
 </script>
 
diff --git a/src/modules/04_registryPerson/views/edit/salary.vue b/src/modules/04_registryPerson/views/edit/salary.vue
index 4cd5cbf50..cf7b7fcb9 100644
--- a/src/modules/04_registryPerson/views/edit/salary.vue
+++ b/src/modules/04_registryPerson/views/edit/salary.vue
@@ -26,10 +26,11 @@ const router = useRouter();
 
 const dataProfile = ref<DataProfile>();
 const tabs = ref<string>("PENDING");
+const statusCheckEdit = ref<string>("");
 const empType = ref<string>(route.params.type.toString());
 const profileId = ref<string>(route.params.id.toString());
 
-/** funtion*/
+/** funtion fetch ข้อมูลส่วนตัว*/
 async function fetchDataProfile() {
   showLoader();
   await http
@@ -40,6 +41,7 @@ async function fetchDataProfile() {
     )
     .then(async (res) => {
       const data = res.data.result;
+      statusCheckEdit.value = data.statusCheckEdit;
       dataProfile.value = {
         fullName: `${data.prefix}${data.firstName} ${data.lastName}`,
         position: data.position,
@@ -69,7 +71,8 @@ function onConfirmEdit() {
           profileId: profileId.value,
           type: empType.value?.toLocaleUpperCase(),
         })
-        .then(() => {
+        .then(async () => {
+          await fetchDataProfile();
           success($q, "ยืนยันเสร็จสิ้นการแก้ไขสำเร็จ");
         })
         .catch((err) => {
@@ -95,7 +98,8 @@ function onConfirmDone() {
           profileId: profileId.value,
           type: empType.value?.toLocaleUpperCase(),
         })
-        .then(() => {
+        .then(async () => {
+          await fetchDataProfile();
           success($q, "ยืนยันข้อมูลถูกต้องสำเร็จ");
         })
         .catch((err) => {
@@ -212,8 +216,15 @@ onMounted(async () => {
       <div class="row q-col-gutter-sm justify-center">
         <div class="col-2">
           <q-btn
+            :disable="
+              statusCheckEdit === 'EDITED' || statusCheckEdit === 'CHECKED'
+            "
+            :color="
+              statusCheckEdit === 'EDITED' || statusCheckEdit === 'CHECKED'
+                ? 'grey'
+                : 'public'
+            "
             outline
-            color="public"
             label="ยืนยันการแก้ไขสำเร็จ"
             class="full-width"
             @click.stop.pervent="onConfirmEdit"
@@ -221,8 +232,9 @@ onMounted(async () => {
         </div>
         <div class="col-2">
           <q-btn
+            :disable="statusCheckEdit === 'CHECKED'"
+            :color="statusCheckEdit === 'CHECKED' ? 'grey' : 'public'"
             outline
-            color="public"
             label="ยืนยันข้อมูลถูกต้อง"
             class="full-width"
             @click.stop.pervent="onConfirmDone"
@@ -253,10 +265,10 @@ onMounted(async () => {
 
       <q-tab-panels v-model="tabs" animated>
         <q-tab-panel name="PENDING">
-          <Table :tabs="tabs" />
+          <Table :tabs="tabs" :status-check-edit="statusCheckEdit" />
         </q-tab-panel>
         <q-tab-panel name="CHECKED">
-          <Table :tabs="tabs" />
+          <Table :tabs="tabs" :status-check-edit="statusCheckEdit" />
         </q-tab-panel>
       </q-tab-panels>
     </q-card-section>