แก้ไขทะเบียนประวัติ ตำแหน่ง/เงินเดือน

2025-03-26 17:39:59 +07:00 · 2025-03-26 17:39:59 +07:00 · 3f9a677d9b
commit 3f9a677d9b
parent 5fe741c35f
14 changed files with 539 additions and 74 deletions
--- a/src/api/02_organizational/api.organization.ts
+++ b/src/api/02_organizational/api.organization.ts
@ -181,6 +181,7 @@ export default {

  //EditPage
  salaryTemp: `${orgProfile}/salaryTemp`,
+  profilePermission: `${orgProfile}/keycloak/permissionProfile`,
  profileidPosition: (type: string) =>
    `${orgProfile}${type}/profileid/position`,
 };
--- a/src/modules/04_registryPerson/components/detail/Employee/01_DataEmployee.vue
+++ b/src/modules/04_registryPerson/components/detail/Employee/01_DataEmployee.vue
@ -191,7 +191,7 @@ const columns = ref<QTableColumn[]>([
    label: "สังกัด",
    sortable: true,
    field: "employeeOc",
-    headerStyle: "font-size: 14px",
+    headerStyle: "font-size: 14px;min-width:280px",
    style: "font-size: 14px",
    sort: (a: string, b: string) =>
      a
@ -401,7 +401,7 @@ onMounted(() => {
          <div class="col-12 col-sm-12 col-md-5 text-grey-6 text-weight-medium">
            <div>สังกัด</div>
          </div>
-          <div class="col-12 col-sm-12 col-md-7">
+          <div class="col-12 col-sm-12 col-md-7 text-html">
            {{ dataEmployee.employeeOc ?? "-" }}
          </div>
        </div>
--- a/src/modules/04_registryPerson/components/detail/GovernmentInformation/07_Position.vue
+++ b/src/modules/04_registryPerson/components/detail/GovernmentInformation/07_Position.vue
@ -196,7 +196,7 @@ const baseColumns = ref<QTableColumn[]>([
    label: "สังกัด",
    sortable: true,
    field: "organization",
-    headerStyle: "font-size: 14px;",
+    headerStyle: "font-size: 14px;min-width:280px",
    style: "font-size: 14px",

    format(val, row) {
@ -962,10 +962,7 @@ onMounted(async () => {
              <q-tooltip v-if="col.value">ดูคำสั่ง</q-tooltip>
            </div>

-            <div
-              v-else-if="col.name == 'organization'"
-              class="text-html"
-            >
+            <div v-else-if="col.name == 'organization'" class="text-html">
              {{
                props.row
                  ? findOrgNameHtml({
--- a/src/modules/04_registryPerson/components/detail/Salary/01_PositionSalary.vue
+++ b/src/modules/04_registryPerson/components/detail/Salary/01_PositionSalary.vue
@ -201,7 +201,7 @@ const baseColumns = ref<QTableColumn[]>([
    label: "สังกัด",
    sortable: true,
    field: "organization",
-    headerStyle: "font-size: 14px",
+    headerStyle: "font-size: 14px;min-width:280px",
    style: "font-size: 14px",
    format(val, row) {
      return findOrgName({
--- a/src/modules/04_registryPerson/interface/request/Edit.ts
+++ b/src/modules/04_registryPerson/interface/request/Edit.ts
@ -31,6 +31,8 @@ interface FormDataSalary {
  orgChild3: string; //ส่วนราชการระดับ 3
  orgChild4: string; //ส่วนราชการระดับ 4
  remark: string; //หมายเหตุstring
+  posNumCodeSit: string;
+  posNumCodeSitAbb: string;
 }

 export type { DataFilter, FormDataSalary };
--- a/src/modules/04_registryPerson/stores/Edit.ts
+++ b/src/modules/04_registryPerson/stores/Edit.ts
@ -4,8 +4,14 @@ import { defineStore } from "pinia";
 import type { DataOption } from "@/modules/04_registryPerson/interface/index/Main";

 export const useEditPosDataStore = defineStore("EditPos", () => {
-  
  const orgData = ref<DataOption[]>([]);
+  const orgId = ref<string>("");
+  const empType = ref<string>("officer");
+  const status = ref<string>("ALL");
+  const keyword = ref<string>("");
+  const page = ref<number>(1);
+  const pageSize = ref<number>(10);
+
  const commandCodeData = ref<DataOption[]>([]);
  const posTypeData = ref<DataOption[]>([]); //รายการประเภทตำแหน่ง | กลุ่มงาน
  const posLevelData = ref<DataOption[]>([]); //รายการระดับตำแหน่ง | ระดับชั้นงาน
@ -28,6 +34,12 @@ export const useEditPosDataStore = defineStore("EditPos", () => {
    posPathSideData,
    posExecutiveData,
    orgData,
+    orgId,
+    empType,
+    status,
+    keyword,
+    page,
+    pageSize,

    // Function
    convertCommandCodeName,
--- a/src/modules/04_registryPerson/views/edit/components/DialogEdit.vue
+++ b/src/modules/04_registryPerson/views/edit/components/DialogEdit.vue
@ -0,0 +1,102 @@
+<script setup lang="ts">
+import { ref, watch } from "vue";
+import { useQuasar } from "quasar";
+
+import { useCounterMixin } from "@/stores/mixin";
+import { useRoute } from "vue-router";
+import http from "@/plugins/http";
+import config from "@/app.config";
+
+import DialogHeader from "@/components/DialogHeader.vue";
+
+const $q = useQuasar();
+const route = useRoute();
+const {
+  dialogConfirm,
+  showLoader,
+  hideLoader,
+  messageError,
+  success,
+  convertDateToAPI,
+} = useCounterMixin();
+
+const profileId = ref<string>(route.params.id.toString());
+
+const modal = defineModel<boolean>("modal", { required: true });
+const empType = defineModel<string>("empType", { required: true });
+
+const props = defineProps({
+  fetchData: { type: Function, required: true },
+});
+
+const remark = ref<string>("");
+
+function onClickCloseDialog() {
+  modal.value = false;
+}
+
+function onSubmit() {
+  dialogConfirm($q, async () => {
+    showLoader();
+    await http
+      .patch(config.API.salaryTemp + `/return-edit/${profileId.value}`, {
+        detailForEdit: remark.value,
+      })
+      .then(async () => {
+        await props.fetchData?.();
+        success($q, "บันทึกข้อมูลสำเร็จ");
+        onClickCloseDialog();
+      })
+      .catch((err) => {
+        messageError($q, err);
+      })
+      .finally(() => {
+        hideLoader();
+      });
+  });
+}
+
+watch(modal, async (val) => {
+  if (val) {
+  } else {
+    remark.value = "";
+  }
+});
+</script>
+
+<template>
+  <q-dialog v-model="modal" persistent>
+    <q-card style="min-width: 40%">
+      <q-form greedy @submit.prevent @validation-success="onSubmit">
+        <DialogHeader :tittle="'ตีกลับให้แก้ไข'" :close="onClickCloseDialog" />
+        <q-separator />
+
+        <q-card-section>
+          <div class="row">
+            <div class="col-12">
+              <q-input
+                class="inputgreen"
+                outlined
+                dense
+                borderless
+                v-model="remark"
+                :label="`${'รายละเอียดการแก้ไข'}`"
+                type="textarea"
+              />
+            </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-card-actions>
+      </q-form>
+    </q-card>
+  </q-dialog>
+</template>
+
+<style scoped></style>
--- a/src/modules/04_registryPerson/views/edit/components/DialogForm.vue
+++ b/src/modules/04_registryPerson/views/edit/components/DialogForm.vue
@ -66,6 +66,8 @@ const formData = reactive<FormDataSalary>({
  orgChild3: "", //ส่วนราชการระดับ 3
  orgChild4: "", //ส่วนราชการระดับ 4
  remark: "", //หมายเหตุ
+  posNumCodeSit: "", //หน่วยงานที่ออกคำสั่ง
+  posNumCodeSitAbb: "", //ตัวย่อหน่วยงานที่ออกคำสั่ง
 });
 const formReadonly = reactive<FormDataSalary>({
  commandCode: "", //ประเภทคำสั่ง
@ -92,6 +94,8 @@ const formReadonly = reactive<FormDataSalary>({
  orgChild3: "", //ส่วนราชการระดับ 3
  orgChild4: "", //ส่วนราชการระดับ 4
  remark: "", //หมายเหตุ
+  posNumCodeSit: "", //หน่วยงานที่ออกคำสั่ง
+  posNumCodeSitAbb: "", //ตัวย่อหน่วยงานที่ออกคำสั่ง
 });

 const dataLevel = ref<DataPosType[]>([]); //รายการ ตำแหน่งเงินเดือน
@ -104,6 +108,7 @@ const posExecutiveOptions = ref<DataOption[]>(store.posExecutiveData); //รา

 const salaryId = ref<string>("");

+/** function เรียกข้อมูลตำแหน่ง*/
 async function fetchDataPosition() {
  try {
    showLoader();
@ -120,6 +125,7 @@ async function fetchDataPosition() {

 /** function fetch ข้อมูลประเภทคำสั่ง*/
 async function fetchDataCommandCode() {
+  // เช็ค store.commandCodeData มีค่ามากกว่า 0 รีเทินร์ false
  if (store.commandCodeData.length > 0) return false;
  await http
    .get(config.API.orgCommandCode)
@ -263,11 +269,19 @@ async function updateSelectType(val: string, status: boolean = false) {
  }
 }

+/**
+ * function กำหนดข้อมูล
+ * @param index รายการที่ต้องการดู
+ */
 async function onDefineData(index: number) {
+  // ดึงข้อมูลจาก rowData ตามตำแหน่ง index ที่รับมา
  const data = rowData.value[index];
+  // กำหนดค่า salaryId ให้เป็น id ของข้อมูลตาม Index
  salaryId.value = data.id;

+  // เรียก function fetchDataPosition เรียกข้อมูลตำแหน่ง
  const newData = await fetchDataPosition();
+  // อัปเดตค่าประเภทตำแหน่งงาน
  updateSelectType(data.positionType);

  if (newData) {
@ -298,6 +312,8 @@ async function onDefineData(index: number) {
    formData.orgChild3 = salaryNew.orgChild3;
    formData.orgChild4 = salaryNew.orgChild4;
    formData.remark = salaryNew.remark;
+    formData.posNumCodeSit = salaryNew.posNumCodeSit;
+    formData.posNumCodeSitAbb = salaryNew.posNumCodeSitAbb;

    formReadonly.commandCode = salaryOld.commandCode;
    formReadonly.commandNo = salaryOld.commandNo;
@ -322,6 +338,8 @@ async function onDefineData(index: number) {
    formReadonly.orgChild3 = salaryOld.orgChild3;
    formReadonly.orgChild4 = salaryOld.orgChild4;
    formReadonly.remark = salaryOld.remark;
+    formReadonly.posNumCodeSit = salaryOld.posNumCodeSit;
+    formReadonly.posNumCodeSitAbb = salaryOld.posNumCodeSitAbb;
  }
 }

--- a/src/modules/04_registryPerson/views/edit/components/DialogHistory.vue
+++ b/src/modules/04_registryPerson/views/edit/components/DialogHistory.vue
@ -0,0 +1,221 @@
+<script setup lang="ts">
+import { ref, watch } from "vue";
+import { useQuasar } from "quasar";
+
+import { useCounterMixin } from "@/stores/mixin";
+import { useRoute } from "vue-router";
+import http from "@/plugins/http";
+import config from "@/app.config";
+
+import type { QTableColumn } from "quasar";
+
+import DialogHeader from "@/components/DialogHeader.vue";
+
+const $q = useQuasar();
+const route = useRoute();
+const { showLoader, hideLoader, messageError, date2Thai, onSearchDataTable } =
+  useCounterMixin();
+
+const profileId = ref<string>(route.params.id.toString());
+
+const modal = defineModel<boolean>("modal", { required: true });
+const empType = defineModel<string>("empType", { required: true });
+
+const keyword = ref<string>("");
+const rows = ref<any[]>([]);
+const rowsMain = ref<any[]>([]);
+const columns = ref<QTableColumn[]>([
+  {
+    name: "no",
+    align: "left",
+    label: "ลำดับ",
+    sortable: false,
+    field: "no",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+
+  {
+    name: "detailForEdit",
+    align: "left",
+    label: "รายละเอียดการแก้ไข",
+    sortable: true,
+    field: "detailForEdit",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+
+    sort: (a: string, b: string) =>
+      a
+        .toString()
+        .localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "lastUpdateFullName",
+    align: "left",
+    label: "ผู้ดำเนินการ",
+    sortable: true,
+    field: "lastUpdateFullName",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a
+        .toString()
+        .localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "returnedDate",
+    align: "left",
+    label: "วันที่ตีกลับ",
+    sortable: true,
+    field: "returnedDate",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    format: (v) => date2Thai(v, false, true),
+    sort: (a: string, b: string) =>
+      a
+        .toString()
+        .localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+]);
+const visibleColumns = ref<string[]>([
+  "no",
+  "returnedDate",
+  "detailForEdit",
+  "lastUpdateFullName",
+]);
+
+/** function ปิด popup ประวัติการดำเนินการ*/
+function onClickCloseDialog() {
+  modal.value = false;
+}
+
+/** function fetch รายการข้อมูลประวัติการดำเนินการ*/
+function fetchDataHistory() {
+  showLoader();
+  http
+    .get(config.API.salaryTemp + `/return-edit/history/${profileId.value}`)
+    .then((res) => {
+      const data = res.data.result;
+      rows.value = data;
+      rowsMain.value = data;
+    })
+    .catch((err) => {
+      messageError($q, err);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+}
+
+/** function ค้นหาข้อมูลรายการในตาราง*/
+function serchDataTable() {
+  rows.value = onSearchDataTable(
+    keyword.value,
+    rowsMain.value,
+    columns.value ? columns.value : []
+  );
+}
+
+/** ตรวจสอบค่าของตัวแปร modal */
+watch(modal, async (val) => {
+  // เช็คว่าถ้า modal เป็น true
+  if (val) {
+    //เรียกฟังก์ชันดึงข้อมูลประวัติการดำเนินการ
+    fetchDataHistory();
+  } else {
+    keyword.value = "";
+  }
+});
+</script>
+
+<template>
+  <q-dialog v-model="modal" persistent>
+    <q-card style="min-width: 80%">
+      <DialogHeader
+        :tittle="'ประวัติการดำเนินการ'"
+        :close="onClickCloseDialog"
+      />
+      <q-separator />
+
+      <q-card-section>
+        <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"
+            >
+              >
+              <template v-slot:header="props">
+                <q-tr :props="props">
+                  <q-th
+                    v-for="col in props.cols"
+                    :key="col.name"
+                    :props="props"
+                  >
+                    <span class="text-weight-medium">{{ col.label }}</span>
+                  </q-th>
+                </q-tr>
+              </template>
+              <template v-slot:body="props">
+                <q-tr :props="props">
+                  <q-td v-for="col in props.cols" :key="col.id">
+                    <div v-if="col.name === 'no'">
+                      {{ props.rowIndex + 1 }}
+                    </div>
+
+                    <div v-else>
+                      {{ col.value ? col.value : "-" }}
+                    </div>
+                  </q-td>
+                </q-tr>
+              </template>
+            </d-table>
+          </div>
+        </div>
+      </q-card-section>
+
+      <q-separator />
+    </q-card>
+  </q-dialog>
+</template>
+
+<style scoped></style>
--- a/src/modules/04_registryPerson/views/edit/components/FormPosition.vue
+++ b/src/modules/04_registryPerson/views/edit/components/FormPosition.vue
@ -1,5 +1,4 @@
 <script setup lang="ts">
-import { ref, reactive, onMounted, computed } from "vue";

 import { useCounterMixin } from "@/stores/mixin";
 import { useEditPosDataStore } from "@/modules/04_registryPerson/stores/Edit";
@ -107,7 +106,7 @@ function classInput(val: boolean) {

 <template>
  <div class="row col-12 q-col-gutter-sm">
-    <div class="col-xs-12 col-sm-12 col-md-8">
+    <div class="col-xs-12 col-sm-6 col-md-8">
      <!-- :rules="[(val: string) => !!val || 'กรุณาเลือกประเภทคำสั่ง']" -->
      <q-select
        outlined
@ -141,7 +140,7 @@ function classInput(val: boolean) {
      </q-select>
    </div>

-    <div class="col-xs-6 col-sm-6 col-md-4">
+    <div class="col-xs-12 col-sm-6 col-md-4">
      <!-- :rules="[ (val: string) => !!val || `${'กรุณาเลือกวันที่คำสั่งมีผล'}`, ]" -->
      <datepicker
        :readonly="isReadonly"
@ -175,6 +174,35 @@ function classInput(val: boolean) {
      </datepicker>
    </div>

+    <div class="col-xs-12 col-sm-6 col-md-8">
+      <q-input
+        :readonly="isReadonly"
+        :class="classInput(isReadonly)"
+        outlined
+        dense
+        lazy-rules
+        borderless
+        v-model="formData.posNumCodeSit"
+        hide-bottom-space
+        :label="`${'หน่วยงานที่ออกคำสั่ง'}`"
+        hint="*ชื่อเต็มหน่วยงานที่ออกคำสั่ง"
+      />
+    </div>
+
+    <div class="col-xs-12 col-sm-6 col-md-4">
+      <q-input
+        :readonly="isReadonly"
+        :class="classInput(isReadonly)"
+        outlined
+        dense
+        lazy-rules
+        borderless
+        v-model="formData.posNumCodeSitAbb"
+        hide-bottom-space
+        :label="`${'ตัวย่อหน่วยงานที่ออกคำสั่ง'}`"
+      />
+    </div>
+
    <div class="col-xs-6 col-sm-12 col-md-8">
      <div class="row q-col-gutter-sm">
        <div class="col-6">
--- a/src/modules/04_registryPerson/views/edit/components/Table.vue
+++ b/src/modules/04_registryPerson/views/edit/components/Table.vue
@ -33,6 +33,7 @@ const empType = ref<string>(route.params.type.toString());
 const profileId = ref<string>(route.params.id.toString());

 const tabs = defineModel<string>("tabs", { required: true });
+const isConfirmEdit = defineModel<boolean>("isConfirmEdit", { required: true });
 const statusCheckEdit = defineModel<string>("statusCheckEdit", {
  required: true,
 });
@ -322,6 +323,11 @@ function onEditData(index: number) {
  modal.value = true;
 }

+/**
+ * function สลับตำแหน่งของข้อมูลขึ้นลง
+ * @param action up , down
+ * @param id id รายการที่ต้องการสลับตะแหน่ง
+ */
 async function onSwapData(action: string, id: string) {
  showLoader();
  await http
@ -337,6 +343,11 @@ async function onSwapData(action: string, id: string) {
    });
 }

+/**
+ * function ลบข้อมูลรายการตำแหน่งเงินเดือน
+ * @param id id ที่ต้องการลบข้อมูลรายการตำแหน่งเงินเดือน
+ * @param isDelete true ลบข้อมูลรานการตำแหน่งเงินเดือน false นำข้อมูลรายการที่ลบไปกลับมา
+ */
 function onConfirmDeleteData(id: string, isDelete: boolean) {
  isDelete
    ? dialogConfirm(
@ -352,6 +363,11 @@ function onConfirmDeleteData(id: string, isDelete: boolean) {
      });
 }

+/**
+ * function ลบข้อมูลรายการตำแหน่งเงินเดือน
+ * @param id id ที่ต้องการลบข้อมูลรายการตำแหน่งเงินเดือน
+ * @param isDelete true ลบข้อมูลรานการตำแหน่งเงินเดือน false นำข้อมูลรายการที่ลบไปกลับมา
+ */
 async function onDeleteData(id: string, isDelete: boolean) {
  showLoader();
  const path = isDelete ? "/delete-renew" : "/delete";
@ -372,6 +388,13 @@ async function onDeleteData(id: string, isDelete: boolean) {
    });
 }

+/**
+ * class สีของข้อความ
+ * @param isDelete รายการที่ลบ
+ * @param isEdit รายการที่แก้ไข
+ * @param isEntry รายการข้อมูลที่มากจาก Entry
+ * @returns class ส
+ */
 function classColorRow(isDelete: boolean, isEdit: boolean, isEntry: boolean) {
  return isDelete
    ? "text-red"
@ -437,7 +460,13 @@ onMounted(() => {
        >
        <template v-slot:header="props">
          <q-tr :props="props">
-            <q-th v-if="tabs === 'PENDING' && statusCheckEdit !== 'CHECKED'" />
+            <q-th
+              v-if="
+                tabs === 'PENDING' &&
+                statusCheckEdit == 'PENDING' &&
+                isConfirmEdit
+              "
+            />
            <q-th v-for="col in props.cols" :key="col.name" :props="props">
              <span class="text-weight-medium">{{ col.label }}</span>
            </q-th>
@ -445,7 +474,13 @@ onMounted(() => {
        </template>
        <template v-slot:body="props">
          <q-tr :props="props">
-            <q-td v-if="tabs === 'PENDING' && statusCheckEdit !== 'CHECKED'">
+            <q-td
+              v-if="
+                tabs === 'PENDING' &&
+                statusCheckEdit == 'PENDING' &&
+                isConfirmEdit
+              "
+            >
              <q-btn
                dense
                flat
--- a/src/modules/04_registryPerson/views/edit/list.vue
+++ b/src/modules/04_registryPerson/views/edit/list.vue
@ -52,13 +52,13 @@ const statusOpsMain = ref<DataOption[]>([
 const statusOps = ref<DataOption[]>(statusOpsMain.value);

 //Table
-const organization = ref<string>("");
+const organization = ref<string>(store.orgId);
 const filter = reactive<DataFilter>({
-  status: "ALL",
-  empType: "officer",
-  keyword: "",
-  page: 1,
-  pageSize: 10,
+  status: store.status,
+  empType: store.empType,
+  keyword: store.keyword,
+  page: store.page,
+  pageSize: store.pageSize,
 });
 const total = ref<number>(0);
 const maxPage = ref<number>(0);
@ -132,7 +132,7 @@ const columns = ref<QTableColumn[]>([
    label: "สังกัด",
    sortable: true,
    field: "org",
-    headerStyle: "font-size: 14px",
+    headerStyle: "font-size: 14px;min-width: 280px",
    style: "font-size: 14px",
  },
  {
@ -189,6 +189,10 @@ async function fetchListOrg(id: string) {
        id: item.orgTreeId,
        name: item.orgName,
      }));
+      if (store.orgData.length === 1) {
+        organization.value = store.orgData[0].id;
+        onSearchData();
+      }
      organizationOpsMain.value = store.orgData;
      organizationOps.value = store.orgData;
    })
@ -246,6 +250,12 @@ function fetchData() {
    rootId: organization.value,
  };

+  store.status = filter.status;
+  store.empType = filter.empType;
+  store.keyword = filter.keyword;
+  store.page = filter.page;
+  store.pageSize = filter.pageSize;
+
  if (organization.value !== "" && filter.empType !== "") {
    rows.value = [];
    showLoader();
@ -271,6 +281,7 @@ function fetchData() {
 * @param val true จะค้นหาหน้าแรก
 */
 function onSearchData(val: boolean = true) {
+  store.orgId = organization.value;
  if (val) {
    filter.page = 1;
  }
@ -470,7 +481,7 @@ onMounted(async () => {
              />
            </q-td>
            <q-td v-for="col in props.cols" :key="col.id">
-              <div v-if="col.name === 'org'" class="text-html table_ellipsis">
+              <div v-if="col.name === 'org'" class="text-html">
                {{ col.value ? col.value : "-" }}
              </div>
              <div v-else>
--- a/src/modules/04_registryPerson/views/edit/salary.vue
+++ b/src/modules/04_registryPerson/views/edit/salary.vue
@ -11,6 +11,8 @@ import { useRoute, useRouter } from "vue-router";
 import type { DataProfile } from "@/modules/04_registryPerson/interface/index/Edit";

 import Table from "@/modules/04_registryPerson/views/edit/components/Table.vue";
+import DialogEdit from "@/modules/04_registryPerson/views/edit/components/DialogEdit.vue";
+import DialogHistory from "@/modules/04_registryPerson/views/edit/components/DialogHistory.vue";

 const $q = useQuasar();
 const {
@ -29,10 +31,13 @@ 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());
+const isConfirmEdit = ref<boolean>(false); //สิทธิ์การแก้ไขข้อมูล
+const isConfirmDone = ref<boolean>(false); //สิทธิ์การยืนยันข้อมูล
+const modalEdit = ref<boolean>(false);
+const modalHistory = ref<boolean>(false);

 /** funtion fetch ข้อมูลส่วนตัว*/
 async function fetchDataProfile() {
-  showLoader();
  await http
    .get(
      config.API.profileidPosition(
@ -54,9 +59,19 @@ async function fetchDataProfile() {
    })
    .catch((err) => {
      messageError($q, err);
+    });
+}
+
+function fetchPromission() {
+  http
+    .get(config.API.profilePermission)
+    .then((res) => {
+      const data = res.data.result;
+      isConfirmEdit.value = data.isEdit;
+      isConfirmDone.value = data.isCheck;
    })
-    .finally(() => {
-      hideLoader();
+    .catch((err) => {
+      messageError($q, err);
    });
 }

@ -116,7 +131,14 @@ function onConfirmDone() {

 /** hook เมื่อมีการเรียกใช้ Components*/
 onMounted(async () => {
-  fetchDataProfile();
+  try {
+    showLoader();
+    await Promise.all([fetchDataProfile(), fetchPromission()]);
+  } catch (err) {
+    messageError($q, err);
+  } finally {
+    hideLoader();
+  }
 });
 </script>

@ -155,67 +177,53 @@ onMounted(async () => {
    <q-card-section>
      <q-list dense separator>
        <q-item>
+          <q-item-section class="col-2 text-bold"
+            >เลขประจำตัวประชาชน:</q-item-section
+          >
+          <q-item-section>{{ dataProfile?.citizenId }}</q-item-section>
+        </q-item>
+
+        <q-item>
+          <q-item-section class="col-2 text-bold">
+            {{ empType === "officer" ? "เลขที่ตำแหน่ง:" : "ตำแหน่งเลขที่:" }}
+          </q-item-section>
          <q-item-section>
-            <q-item-label
-              ><strong>เลขประจำตัวประชาชน:</strong>
-              {{ dataProfile?.citizenId }}</q-item-label
-            >
+            {{ dataProfile?.posNo }}
          </q-item-section>
        </q-item>

        <q-item>
+          <q-item-section class="col-2 text-bold">
+            {{ empType === "officer" ? "ตำแหน่งประเภท:" : "กลุ่มงาน:" }}
+          </q-item-section>
          <q-item-section>
-            <q-item-label
-              ><strong
-                >{{
-                  empType === "officer" ? "เลขที่ตำแหน่ง:" : "ตำแหน่งเลขที่:"
-                }}
-              </strong>
-              {{ dataProfile?.posNo }}</q-item-label
-            >
+            {{ dataProfile?.posType }}
          </q-item-section>
        </q-item>

        <q-item>
+          <q-item-section class="col-2 text-bold">
+            {{ empType === "officer" ? "ระดับ:" : "ระดับชั้นงาน:" }}
+          </q-item-section>
          <q-item-section>
-            <q-item-label
-              ><strong>
-                {{
-                  empType === "officer" ? "ตำแหน่งประเภท:" : "กลุ่มงาน:"
-                }}</strong
-              >
-              {{ dataProfile?.posType }}</q-item-label
-            >
+            {{ dataProfile?.posLevel }}
          </q-item-section>
        </q-item>

        <q-item>
-          <q-item-section>
-            <q-item-label
-              ><strong>{{
-                empType === "officer" ? "ระดับ:" : "ระดับชั้นงาน:"
-              }}</strong>
-              {{ dataProfile?.posLevel }}</q-item-label
-            >
-          </q-item-section>
-        </q-item>
-
-        <q-item>
-          <q-item-section>
-            <q-item-label class="text-html"
-              ><strong>สังกัด:</strong> <span></span
-              >{{ dataProfile?.org }}</q-item-label
-            >
+          <q-item-section top class="col-2 text-bold"> สังกัด: </q-item-section>
+          <q-item-section class="text-html">
+            {{ dataProfile?.org }}
          </q-item-section>
        </q-item>
      </q-list>
    </q-card-section>

-    <q-separator />
+    <q-separator v-if="isConfirmEdit || isConfirmDone" />

-    <q-card-section>
+    <q-card-section v-if="isConfirmEdit || isConfirmDone">
      <div class="row q-col-gutter-sm justify-center">
-        <div class="col-2">
+        <div class="row items-center" v-if="isConfirmEdit">
          <q-btn
            :disable="
              statusCheckEdit === 'EDITED' || statusCheckEdit === 'CHECKED'
@ -227,19 +235,33 @@ onMounted(async () => {
            "
            outline
            label="ยืนยันการแก้ไขสำเร็จ"
-            class="full-width"
            @click.stop.pervent="onConfirmEdit"
          />
-        </div>
-        <div class="col-2">
          <q-btn
-            :disable="statusCheckEdit === 'CHECKED'"
-            :color="statusCheckEdit === 'CHECKED' ? 'grey' : 'public'"
+            flat
+            label="ประวัติการดำเนินการ"
+            class="q-ml-md"
+            color="blue"
+            @click="modalHistory = true"
+          />
+        </div>
+        <div
+          class="row items-center"
+          v-if="isConfirmDone && statusCheckEdit === 'EDITED'"
+        >
+          <q-btn
+            color="public"
            outline
            label="ยืนยันข้อมูลถูกต้อง"
-            class="full-width"
            @click.stop.pervent="onConfirmDone"
          />
+          <q-btn
+            flat
+            label="ตีกลับให้แก้ไข"
+            class="q-ml-md"
+            color="blue"
+            @click="modalEdit = true"
+          />
        </div>
      </div>
    </q-card-section>
@ -266,14 +288,30 @@ onMounted(async () => {

      <q-tab-panels v-model="tabs" animated>
        <q-tab-panel name="PENDING">
-          <Table :tabs="tabs" :status-check-edit="statusCheckEdit" />
+          <Table
+            :tabs="tabs"
+            :status-check-edit="statusCheckEdit"
+            :is-confirm-edit="isConfirmEdit"
+          />
        </q-tab-panel>
        <q-tab-panel name="CHECKED">
-          <Table :tabs="tabs" :status-check-edit="statusCheckEdit" />
+          <Table
+            :tabs="tabs"
+            :status-check-edit="statusCheckEdit"
+            :is-confirm-edit="isConfirmEdit"
+          />
        </q-tab-panel>
      </q-tab-panels>
    </q-card-section>
  </q-card>
+
+  <DialogEdit
+    v-model:modal="modalEdit"
+    :emp-type="empType"
+    :fetch-data="fetchDataProfile"
+  />
+
+  <DialogHistory v-model:modal="modalHistory" :emp-type="empType" />
 </template>

 <style scoped></style>
--- a/src/modules/04_registryPerson/views/listView.vue
+++ b/src/modules/04_registryPerson/views/listView.vue
@ -344,7 +344,7 @@ async function fetchTree() {
  if (data) {
    isLoad.value = true;
    node.value = data;
-    hideLoader();
+    // hideLoader();
  }
 }