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

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`,
 };

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>

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
+            <div v-else-if="col.name == 'organization'" class="text-html">
-              v-else-if="col.name == 'organization'"
-              class="text-html"
-            >
               {{
                 props.row
                   ? findOrgNameHtml({

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({

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 };

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,

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>

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;
   }
 }
 

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>

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">

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

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",
+  status: store.status,
-  empType: "officer",
+  empType: store.empType,
-  keyword: "",
+  keyword: store.keyword,
-  page: 1,
+  page: store.page,
-  pageSize: 10,
+  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>

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(() => {
+    .catch((err) => {
-      hideLoader();
+      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
+            {{ dataProfile?.posNo }}
-              ><strong>เลขประจำตัวประชาชน:</strong>
-              {{ dataProfile?.citizenId }}</q-item-label
-            >
           </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
+            {{ dataProfile?.posType }}
-              ><strong
-                >{{
-                  empType === "officer" ? "เลขที่ตำแหน่ง:" : "ตำแหน่งเลขที่:"
-                }}
-              </strong>
-              {{ dataProfile?.posNo }}</q-item-label
-            >
           </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
+            {{ dataProfile?.posLevel }}
-              ><strong>
-                {{
-                  empType === "officer" ? "ตำแหน่งประเภท:" : "กลุ่มงาน:"
-                }}</strong
-              >
-              {{ dataProfile?.posType }}</q-item-label
-            >
           </q-item-section>
         </q-item>
 
         <q-item>
-          <q-item-section>
+          <q-item-section top class="col-2 text-bold"> สังกัด: </q-item-section>
-            <q-item-label
+          <q-item-section class="text-html">
-              ><strong>{{
+            {{ dataProfile?.org }}
-                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>
         </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'"
+            flat
-            :color="statusCheckEdit === 'CHECKED' ? 'grey' : 'public'"
+            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>

src/modules/04_registryPerson/views/listView.vue

@@ -344,7 +344,7 @@ async function fetchTree() {
   if (data) {
     isLoad.value = true;
     node.value = data;
-    hideLoader();
+    // hideLoader();
   }
 }