Merge branch 'develop' into devTee

src/components/Workflow/DialogApprove.vue

@@ -13,38 +13,36 @@ const { dialogConfirm, showLoader, hideLoader, messageError } =
   useCounterMixin();
 
 const modal = defineModel<boolean>("modal", { required: true });
-const { stateId } = defineProps({
-  stateId: { type: String, require: true },
+const props = defineProps({
+  dataUserComment: { type: Object, require: true },
+  fetchData: { type: Function, require: true },
 });
 
 const isAcceptSetting = ref<boolean>(false);
 const isApproveSetting = ref<boolean>(false);
 const isReasonSetting = ref<boolean>(false);
 
+const stateUserCommentId = ref<string>("");
 const isAccept = ref<boolean>(false);
 const isApprove = ref<string>("");
 const reason = ref<string>("");
 
 async function fetchData() {
-  showLoader();
-  await http
-    .post(config.API.workflow + `comment-state-user`, { stateId: stateId })
-    .then(async (res) => {
-      const data = res.data.result;
-      isAcceptSetting.value = data.isAcceptSetting;
-      isApproveSetting.value = data.isApproveSetting;
-      isReasonSetting.value = data.isReasonSetting;
-
-      isAccept.value = data.isAccept;
-      isApprove.value = data.isApprove ? "approve" : "";
-      reason.value = data.reason;
-    })
-    .catch((err) => {
-      messageError($q, err);
-    })
-    .finally(() => {
-      hideLoader();
-    });
+  const data = props.dataUserComment;
+  if (data) {
+    stateUserCommentId.value = data.id;
+    isAcceptSetting.value = data.isAcceptSetting;
+    isApproveSetting.value = data.isApproveSetting;
+    isReasonSetting.value = data.isReasonSetting;
+    isAccept.value = data.isAccept;
+    isApprove.value =
+      data.isApprove === true
+        ? "approve"
+        : data.isApprove === false
+        ? "reject"
+        : "";
+    reason.value = data.reason;
+  }
 }
 
 function onSubmit() {
@@ -52,7 +50,7 @@ function onSubmit() {
     showLoader();
     await http
       .post(config.API.workflow + `comment`, {
-        stateId: stateId,
+        stateUserCommentId: stateUserCommentId.value,
         isAccept: isAcceptSetting.value ? isAccept.value : undefined,
         isApprove: isApproveSetting.value
           ? isApprove.value === "approve"
@@ -62,6 +60,7 @@ function onSubmit() {
         reason: isReasonSetting.value ? reason.value : undefined,
       })
       .then(async () => {
+        await props.fetchData?.();
         onCloseModal();
       })
       .catch((err) => {
@@ -135,6 +134,7 @@ watch(modal, (val) => {
               <div class="q-pa-sm q-gutter-sm">
                 <div class="col-12">
                   <q-input
+                    class="inputgreen"
                     dense
                     outlined
                     label="ความเห็น"

src/components/Workflow/DialogSelectPerson.vue

@@ -15,7 +15,7 @@ const { dialogConfirm, showLoader, hideLoader, messageError } =
   useCounterMixin();
 
 const modal = defineModel<boolean>("modal", { required: true });
-const { stateId, fetchData } = defineProps({
+const props = defineProps({
   stateId: { type: String, require: true },
   fetchData: { type: Function, require: true },
 });
@@ -89,14 +89,14 @@ function onSubmit() {
     showLoader();
     await http
       .post(config.API.workflow + `add-step`, {
-        stateId: stateId,
+        stateId: props.stateId,
         profileId: selected.value[0].id,
         isAcceptSetting: isAcceptSetting.value,
         isApproveSetting: isApproveSetting.value,
         isReasonSetting: isReasonSetting.value,
       })
       .then(async () => {
-        await fetchData?.();
+        await props.fetchData?.();
         onCloseModal();
       })
       .catch((err) => {
@@ -112,6 +112,9 @@ function onCloseModal() {
   modal.value = false;
   selected.value = [];
   rows.value = [];
+  isAcceptSetting.value = false;
+  isApproveSetting.value = false;
+  isReasonSetting.value = false;
 }
 
 watch(modal, (val) => {

src/components/Workflow/Main.vue

@@ -23,6 +23,7 @@ const { id, sysName } = defineProps({
 
 const stateId = ref<string>(""); //id state ปัจุบัน
 const state = ref<number>(1); //state ปัจุบัน
+const dataUserComment = ref<any>();
 
 const isPermission = ref<boolean>(true); //การเข้าถึง Workflow
 const permission = ref<Permission>({
@@ -47,8 +48,12 @@ async function fetchCheckState() {
     .then(async (res) => {
       await fetchData();
       const data = await res.data.result;
+
       stateId.value = data.stateId;
-      state.value = data.stateNo === 4 ? 5 : data.stateNo;
+      state.value =
+        data.stateNo === itemState.value.length
+          ? data.stateNo + 1
+          : data.stateNo;
       permission.value = {
         isChangeState: data.can_change_state,
         isOperate: data.can_operate,
@@ -112,11 +117,6 @@ defineExpose({
     <div class="bg-grey-1 q-pa-sm col-12 row items-center">
       <div class="q-pl-sm text-weight-bold text-dark">Workflow</div>
       <q-space />
-      <q-btn
-        @click.prevent="modalApprove = true"
-        label="DialogApprove"
-        color="public"
-      />
     </div>
     <div class="col-12"><q-separator /></div>
     <q-card-section>
@@ -154,10 +154,7 @@ defineExpose({
             >
               <div v-if="step.stateUserComments.length !== 0">
                 <q-list bordered separator style="min-width: 20vw">
-                  <q-item
-                    v-for="(item, index) in step.stateUserComments"
-                    :key="index"
-                  >
+                  <q-item v-for="item in step.stateUserComments">
                     <q-item-section>
                       <q-item-label>
                         {{ `${item.prefix}${item.firstName} ${item.lastName}` }}
@@ -169,19 +166,32 @@ defineExpose({
                     </q-item-section>
 
                     <q-item-section side top>
-                      <q-item-label class="text-green">
+                      <q-item-label
+                        :class="!item.isApprove ? 'text-red' : 'text-green'"
+                      >
                         {{
                           item.isAcceptSetting
                             ? item.isAccept
                               ? "รับทราบ"
                               : ""
                             : item.isApproveSetting
-                            ? item.isApprove
+                            ? item.isApprove === true
                               ? "อนุมันติ"
+                              : item.isApprove === false
+                              ? "ไม่อนุมันติ"
                               : ""
                             : ""
-                        }}</q-item-label
-                      >
+                        }}
+                      </q-item-label>
+
+                      <q-btn
+                        v-if="item.isComment && state === index + 1"
+                        @click.prevent="
+                          (dataUserComment = item), (modalApprove = true)
+                        "
+                        label="แสดงความเห็น"
+                        color="public"
+                      />
                     </q-item-section>
                   </q-item>
                 </q-list>
@@ -215,5 +225,9 @@ defineExpose({
     :fetch-data="fetchCheckState"
   />
 
-  <DialogApprove v-model:modal="modalApprove" :state-id="stateId" />
+  <DialogApprove
+    v-model:modal="modalApprove"
+    :data-user-comment="dataUserComment"
+    :fetch-data="fetchCheckState"
+  />
 </template>

src/interface/response/workflow/Main.ts

@@ -25,6 +25,7 @@ interface StateUserComments {
   firstName: string;
   lastName: string;
   prefix: string;
+  isComment: boolean;
 }
 
 interface DataCommander {

src/modules/04_registryPerson/components/requestEdit/01_TabInformation.vue

@@ -4,6 +4,7 @@ import { useQuasar } from "quasar";
 
 import { useRequestEditStore } from "@/modules/04_registryPerson/stores/RequestEdit";
 import { useCounterMixin } from "@/stores/mixin";
+import { useRouter } from "vue-router";
 import config from "@/app.config";
 import http from "@/plugins/http";
 
@@ -12,21 +13,23 @@ import type { QTableProps } from "quasar";
 import type {
   DataOption,
   Pagination,
+  Request,
 } from "@/modules/04_registryPerson/interface/index/Main";
-import type { DateRequest } from "@/modules/04_registryPerson/interface/response/Main";
+import type { DataRequest } from "@/modules/04_registryPerson/interface/response/Main";
 
 /** importComponents*/
 import DialogStatus from "@/modules/04_registryPerson/components/requestEdit/Dialog01_EditStatus.vue";
 import DialogUpdate from "@/modules/04_registryPerson/components/Dialog/DialogUpdate.vue";
 
 const $q = useQuasar();
+const router = useRouter();
 const store = useRequestEditStore();
 const { showLoader, hideLoader, messageError, date2Thai } = useCounterMixin();
 
 //Table
 const idCard = ref<string>("");
 const profileId = ref<string>("");
-const rows = ref<DateRequest[]>([]); //รายการข้อมูลคำร้องขอแก้ไขทะเบียนประวัติ
+const rows = ref<DataRequest[]>([]); //รายการข้อมูลคำร้องขอแก้ไขทะเบียนประวัติ
 const page = ref<number>(1); //หน้า
 const pageSize = ref<number>(10); //จำนวนต่อหน้า
 const rowsTotal = ref<number>(0); //จำนวนรายการ
@@ -176,14 +179,15 @@ function filterOption(val: string, update: Function) {
  * funciton  แก่ไขคำร้อง
  * @param id รายการคำร้อง
  */
-function onclickEdit(data: any) {
+function onclickEdit(data: Request) {
   requestId.value = data.id;
   if (data.topic == "ขออัปเดตข้อมูลจากกรมการปกครอง") {
     modalUpdate.value = true;
     idCard.value = data.idcard as string;
     profileId.value = data.profileId;
   } else {
-    modalStatus.value = true;
+    // modalStatus.value = true;
+    router.push(`/registry-officer/request-edit/personal/${data.id}`);
   }
 }
 
@@ -416,7 +420,7 @@ onMounted(() => {
     v-model:id-card="idCard"
     v-model:profile-id="profileId"
     :fetch-data="fetchListRequset"
-    :request-id=requestId
+    :request-id="requestId"
   />
 </template>
 

src/modules/04_registryPerson/components/requestEdit/Dialog01_EditStatus.vue

@@ -26,7 +26,7 @@ const isReadOnly = ref<boolean>(false); //อ่ายได้อย่าง
 //ฟอร์มสถานะคำร้อง
 const formData = reactive({
   status: "", //สถานะ
-  remark: "", //หมายเหตุ
+  remark: "", //หมายเหตุแ
 });
 //ข้อมูลรายการสถานะ
 const statusOptionMain = ref<DataOption[]>(

src/modules/04_registryPerson/components/requestEdit/Page01_Detail.vue

@@ -0,0 +1,270 @@
+<script setup lang="ts">
+import { onMounted, ref, reactive } from "vue";
+import { useQuasar } from "quasar";
+
+import { useRouter, useRoute } from "vue-router";
+import { useRequestEditStore } from "@/modules/04_registryPerson/stores/RequestEdit";
+import { useCounterMixin } from "@/stores/mixin";
+import http from "@/plugins/http";
+import config from "@/app.config";
+
+import type { DataOption } from "@/modules/04_registryPerson/interface/index/Main";
+import type { DataRequest } from "@/modules/04_registryPerson/interface/response/Main";
+
+import Workflow from "@/components/Workflow/Main.vue";
+
+const $q = useQuasar();
+const router = useRouter();
+const route = useRoute();
+const store = useRequestEditStore();
+const { date2Thai, showLoader, hideLoader, messageError, success } =
+  useCounterMixin();
+
+const requestId = ref<string>(route.params.id.toString());
+const dataRequest = ref<any>({
+  fullname: "",
+  createdAt: null,
+  topic: "",
+  detail: "",
+});
+
+//ฟอร์มสถานะคำร้อง
+const formData = reactive({
+  status: "", //สถานะ
+  remark: "", //หมายเหตุ
+});
+
+const isReadOnly = ref<boolean>(false); //อ่ายได้อย่างเดียว
+//ข้อมูลรายการสถานะ
+const statusOptionMain = ref<DataOption[]>(
+  store.optionStatus.filter((e) => e.id !== "")
+);
+const statusOption = ref<DataOption[]>(statusOptionMain.value); //ตัวเลือกรายการสถานะ
+
+/** function fetch ข้อมูลคำร้องแก้ไข*/
+async function fetchDataRequest() {
+  showLoader();
+  await http
+    .get(config.API.requestEdit + `${requestId.value}`)
+    .then((res) => {
+      const data = res.data.result;
+      dataRequest.value = {
+        fullname: data.fullname,
+        createdAt: data.createdAt,
+        topic: data.topic,
+        detail: data.detail,
+      };
+
+      //   formData.status = data.status;
+      //   formData.remark = data.remark;
+      //   if (data.status !== "PENDING") {
+      //     isReadOnly.value = true;
+      //   } else {
+      //     isReadOnly.value = false;
+      //   }
+    })
+    .catch((err) => {
+      messageError($q, err);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+}
+
+/**
+ * function ค้นหาคำใน select  สถานะคำร้อง
+ * @param val คำค้น
+ * @param update Function
+ */
+function filterOption(val: string, update: Function) {
+  update(() => {
+    statusOption.value = statusOptionMain.value.filter(
+      (v: DataOption) => v.name.indexOf(val) > -1
+    );
+  });
+}
+
+/**
+ * class inpui
+ * @param val ค่าสถานะ
+ */
+function classInput(val: boolean) {
+  return {
+    "full-width cursor-pointer ": val,
+    "full-width cursor-pointer inputgreen": !val,
+  };
+}
+
+onMounted(async () => {
+  await fetchDataRequest();
+});
+</script>
+
+<template>
+  <div class="row items-center">
+    <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)"
+      />
+      รายละเอียดคำร้องขอแก้ไขทะเบียนประวัติของ{{ dataRequest.fullname }}
+    </div>
+  </div>
+  <q-card>
+    <q-card-section>
+      <div class="row q-gutter-sm">
+        <!-- รายละเอียดคำร้องขอแก้ไข -->
+        <q-card bordered class="row col-12">
+          <div class="bg-grey-1 q-pa-sm col-12 row items-center">
+            <div class="q-pl-sm text-weight-bold text-dark">
+              รายละเอียดคำร้องขอแก้ไข
+            </div>
+          </div>
+          <div class="col-12"><q-separator /></div>
+          <q-card-section class="col-12">
+            <div class="row q-col-gutter-sm">
+              <!-- วันที่ยื่นขอ -->
+              <div class="col-md-2 col-xs-12">
+                <datepicker
+                  menu-class-name="modalfix"
+                  v-model="dataRequest.createdAt"
+                  :locale="'th'"
+                  autoApply
+                  readonly
+                  borderless
+                  :enableTimePicker="false"
+                  week-start="0"
+                >
+                  <template #year="{ year }">
+                    {{ year + 543 }}
+                  </template>
+                  <template #year-overlay-value="{ value }">
+                    {{ parseInt(value + 543) }}
+                  </template>
+                  <template #trigger>
+                    <q-input
+                      outlined
+                      readonly
+                      dense
+                      hide-bottom-space
+                      class="full-width"
+                      :model-value="
+                        dataRequest.createdAt != null
+                          ? date2Thai(dataRequest.createdAt)
+                          : null
+                      "
+                      :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 class="col-md-10 col-xs-12">
+                <q-input
+                  :class="classInput(true)"
+                  readonly
+                  v-model="dataRequest.topic"
+                  label="เรื่อง"
+                  dense
+                  outlined
+                />
+              </div>
+
+              <!-- รายละเอียด -->
+              <div class="col-12">
+                <q-input
+                  :class="classInput(true)"
+                  readonly
+                  v-model="dataRequest.detail"
+                  label="รายละเอียด"
+                  dense
+                  outlined
+                  type="textarea"
+                />
+              </div>
+            </div>
+          </q-card-section>
+        </q-card>
+
+        <!-- แก้ไขสถานะคำร้อง -->
+        <q-card bordered class="row col-12">
+          <div class="bg-grey-1 q-pa-sm col-12 row items-center">
+            <div class="q-pl-sm text-weight-bold text-dark">
+              แก้ไขสถานะคำร้อง
+            </div>
+          </div>
+          <div class="col-12"><q-separator /></div>
+          <q-card-section class="col-12">
+            <div class="row q-col-gutter-sm">
+              <div class="col-xs-12 col-md-12">
+                <q-select
+                  :class="classInput(isReadOnly)"
+                  :readonly="isReadOnly"
+                  v-model="formData.status"
+                  label="สถานะ"
+                  dense
+                  outlined
+                  emit-value
+                  map-options
+                  :options="statusOption"
+                  :rules="[(val:string) => !!val || `${'กรุณาเลือกสถานะ'}`]"
+                  lazy-rules
+                  hide-bottom-space
+                  use-input
+                  option-label="name"
+                  option-value="id"
+                  @filter="(inputValue:string,
+                          doneFn:Function) => filterOption(inputValue, doneFn
+                          ) "
+                >
+                  <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-12 col-md-12">
+                <q-input
+                  :class="classInput(isReadOnly)"
+                  :readonly="isReadOnly"
+                  v-model="formData.remark"
+                  label="หมายเหตุ"
+                  dense
+                  outlined
+                  type="textarea"
+                  hide-bottom-space
+                />
+              </div>
+            </div>
+          </q-card-section>
+        </q-card>
+
+        <div class="col-12">
+          <Workflow :id="requestId" sys-name=" REGISTRY_PROFILE" />
+        </div>
+      </div>
+    </q-card-section>
+  </q-card>
+</template>
+
+<style scoped></style>

src/modules/04_registryPerson/interface/index/Main.ts

@@ -72,6 +72,21 @@ interface DataItemsDevelopment {
   label: string;
 }
 
+interface Request {
+  createdAt: string;
+  createdFullName: string;
+  detail: string;
+  fullname: string;
+  id: string;
+  idcard: string;
+  lastUpdateFullName: string;
+  lastUpdatedAt: string;
+  profileId: string;
+  remark: string;
+  status: string;
+  topic: string;
+}
+
 export type {
   Pagination,
   DataOption,
@@ -86,4 +101,5 @@ export type {
   DataOptionEducation,
   DataOptionEducationLevel,
   DataItemsDevelopment,
+  Request,
 };

src/modules/04_registryPerson/interface/response/Main.ts

@@ -26,7 +26,7 @@ interface DataPerson {
   rank?: string;
 }
 
-interface DateRequest {
+interface DataRequest {
   createdAt: string;
   createdFullName: string;
   detail: string;
@@ -182,7 +182,7 @@ export type {
   DataType,
   DataLevel,
   DataPerson,
-  DateRequest,
+  DataRequest,
   DataProfile,
   DataLeave,
   DataLeaveType,

src/modules/04_registryPerson/router.ts

@@ -8,6 +8,10 @@ const detailPage = () =>
 // รายการคำร้องขอแก้ไขทะเบียนประวัติ
 const requestEdit = () =>
   import("@/modules/04_registryPerson/views/requestEditView.vue");
+const Page01_Detail = () =>
+  import(
+    "@/modules/04_registryPerson/components/requestEdit/Page01_Detail.vue"
+  );
 
 export default [
   {
@@ -60,4 +64,14 @@ export default [
       Role: "STAFF",
     },
   },
+  {
+    path: "/registry-officer/request-edit/personal/:id",
+    name: "registryNewRequestEdit/personal",
+    component: Page01_Detail,
+    meta: {
+      Auth: true,
+      Key: "SYS_REGISTRY_OFFICER",
+      Role: "STAFF",
+    },
+  },
 ];

src/modules/05_placement/components/probation/MainProbation.vue

@@ -608,8 +608,8 @@ onMounted(async () => {
                   @click="onAdd(props.row.personal_id)"
                   flat
                   round
-                  color="green"
-                  icon="mdi-check-decagram"
+                  color="blue"
+                  icon="mdi-account-supervisor"
                 >
                   <q-tooltip
                     >แต่งตั้งคณะกรรมการประเมินผลการทดลองปฏิบัติหน้าที่ราชการ</q-tooltip

src/modules/09_leave/components/2_Leave/DetailLeave.vue

@@ -28,6 +28,7 @@ import FormLeaveToTraining from "@/modules/09_leave/components/2_Leave/formDetai
 import FormLeaveToWorkInternational from "@/modules/09_leave/components/2_Leave/formDetail/formLeaveToWorkInternational.vue"; // ลาไปปฏิบัติงานในองค์การระหว่างประเทศ
 import FormSpouse from "@/modules/09_leave/components/2_Leave/formDetail/formSpouse.vue"; // ลาติดตามคู่สมรส
 import FormVocationalRehabilitation from "@/modules/09_leave/components/2_Leave/formDetail/formVocationalRehabilitation.vue"; //ลาไปฟื้นฟูสมรรถภาพด้านอาชีพ
+import WorkFlow from "@/components/Workflow/Main.vue";
 
 /** use */
 const $q = useQuasar();
@@ -131,8 +132,7 @@ async function fetchDetailLeave(paramsId: string) {
   await http
     .get(config.API.leaveListById(paramsId))
     .then(async (res) => {
-      const data = res.data.result;
-
+      const data = await res.data.result;
       formData.id = data.id;
       formData.reasonCommander = data.reasonCommander
         ? data.reasonCommander
@@ -329,43 +329,45 @@ function checkLeaveType(leaveTypeId: string, formData: FremData) {
 }
 
 /** Function dialog*/
-async function openModal(data: string) {
-  if (data === "approve") {
-    modalApprove.value = true;
-    dialogTitle.value = "อนุมัติ";
-  }
-  if (data === "UnApprove") {
-    modalApprove.value = true;
-    dialogTitle.value = "ไม่อนุมัติ";
-  }
-  if (data === "authority") {
-    modalApprove.value = true;
-    dialogTitle.value = "ส่งไปยังผู้มีอำนาจ";
-    dialogLabel.value = "ความคิดเห็น";
-  }
-}
+// async function openModal(data: string) {
+//   if (data === "approve") {
+//     modalApprove.value = true;
+//     dialogTitle.value = "อนุมัติ";
+//   }
+//   if (data === "UnApprove") {
+//     modalApprove.value = true;
+//     dialogTitle.value = "ไม่อนุมัติ";
+//   }
+//   if (data === "authority") {
+//     modalApprove.value = true;
+//     dialogTitle.value = "ส่งไปยังผู้มีอำนาจ";
+//     dialogLabel.value = "ความคิดเห็น";
+//   }
+// }
 
 /** function ส่งไปผู้บังคับบัญชา*/
-function sendToCommand() {
-  dialogConfirm(
-    $q,
-    async () => {
-      await http
-        .get(config.API.leaveApproveToComander(formData.id))
-        .then(() => {
-          success($q, "บันทึกข้อมูลสำเร็จ");
-        })
-        .catch((err) => {
-          messageError($q, err);
-        })
-        .finally(async () => {
-          await fetchDetailLeave(paramsId);
-        });
-    },
-    "ยืนยันการส่งไปผู้บังคับบัญชา",
-    "ต้องการยืนยันการส่งไปผู้บังคับบัญชานี้ใช่หรือไม่ ?"
-  );
-}
+// function sendToCommand() {
+//   dialogConfirm(
+//     $q,
+//     async () => {
+//       showLoader();
+//       await http
+//         .get(config.API.leaveApproveToComander(formData.id))
+//         .then(async () => {
+//           await fetchDetailLeave(paramsId);
+//           success($q, "บันทึกข้อมูลสำเร็จ");
+//         })
+//         .catch((err) => {
+//           messageError($q, err);
+//         })
+//         .finally(async () => {
+//           hideLoader();
+//         });
+//     },
+//     "ยืนยันการส่งไปผู้บังคับบัญชา",
+//     "ต้องการยืนยันการส่งไปผู้บังคับบัญชานี้ใช่หรือไม่ ?"
+//   );
+// }
 
 /** Function Save */
 function clickSave(reason: string) {
@@ -377,17 +379,19 @@ function clickSave(reason: string) {
     dialogConfirm(
       $q,
       async () => {
+        showLoader();
         await http
           .put(config.API.leaveApprove(formData.id), body)
-          .then(() => {
+          .then(async () => {
+            await fetchDetailLeave(paramsId);
             success($q, "บันทึกข้อมูลสำเร็จ");
+            modalApprove.value = false;
           })
           .catch((err) => {
             messageError($q, err);
           })
           .finally(async () => {
-            await fetchDetailLeave(paramsId);
-            modalApprove.value = false;
+            hideLoader();
           });
       },
       "ยืนยันอนุมัติ",
@@ -399,17 +403,19 @@ function clickSave(reason: string) {
     dialogConfirm(
       $q,
       async () => {
+        showLoader();
         await http
           .put(config.API.leaveReject(formData.id), body)
-          .then(() => {
+          .then(async () => {
+            await fetchDetailLeave(paramsId);
             success($q, "บันทึกข้อมูลสำเร็จ");
+            modalApprove.value = false;
           })
           .catch((err) => {
             messageError($q, err);
           })
           .finally(async () => {
-            await fetchDetailLeave(paramsId);
-            modalApprove.value = false;
+            hideLoader();
           });
       },
       "ยืนยันไม่อนุมัติ",
@@ -420,17 +426,19 @@ function clickSave(reason: string) {
     dialogConfirm(
       $q,
       async () => {
+        showLoader();
         await http
           .put(config.API.leaveComanderApprove(formData.id), body)
-          .then(() => {
+          .then(async () => {
+            await fetchDetailLeave(paramsId);
             success($q, "บันทึกข้อมูลสำเร็จ");
+            modalApprove.value = false;
           })
           .catch((err) => {
             messageError($q, err);
           })
           .finally(async () => {
-            await fetchDetailLeave(paramsId);
-            modalApprove.value = false;
+            hideLoader();
           });
       },
       "ยืนยันการส่งไปยังผู้มีอำนาจ",
@@ -460,12 +468,12 @@ function formattedNumber(x: number) {
 }
 
 onMounted(async () => {
-  // showLoader();
   if (paramsId) {
     await fetchDetailLeave(paramsId);
   }
 });
 </script>
+
 <template>
   <div class="toptitle text-dark col-12 row items-center">
     <div class="row col-12 q-col-gutter-sm q-mb-sm">
@@ -480,7 +488,7 @@ onMounted(async () => {
           class="q-mr-sm"
           @click="router.push(`/leave`)"
         />
-        รายละเอียดการลาของ {{ formData.fullName }}
+        รายละเอียดการลาของ{{ formData.fullName }}
       </div>
       <div>
         <q-btn class="q-mr-sm" icon="mdi-download" round color="primary" flat>
@@ -534,269 +542,291 @@ onMounted(async () => {
       <q-space />
     </div>
   </div>
-  <q-card flat bordered class="col-12 q-mt-sm">
-    <div class="col-12 row q-py-md q-pl-md">
-      <div class="col-12 q-col-gutter-md">
-        <div class="row col-12">
-          <q-card bordered class="bg-grey-1 q-pa-md col-12">
-            <div class="row q-col-gutter-md col-12">
-              <div class="col-xs-12 col-sm-5 row items-center q-my-xs">
-                <div class="col-12 row">
-                  <div class="col-xs-5 col-sm-3 text-grey-8">ประเภทการลา</div>
-                  <div class="col text-primary">
-                    {{
-                      checkForm !== "FormUpasom" && checkForm !== "FormHajj"
-                        ? formData.leaveTypeName
-                        : formData.hajjDayStatus
-                        ? "ลาประกอบพิธีฮัจญ์"
-                        : "ลาอุปสมบท"
-                    }}
+
+  <div class="q-pa-sm">
+    <q-card flat bordered class="col-12 q-mt-sm">
+      <div class="col-12 row q-py-md q-pl-md">
+        <div class="col-12 q-col-gutter-md">
+          <!-- ประเภทการลา -->
+          <div class="row col-12">
+            <q-card bordered class="bg-grey-1 q-pa-md col-12">
+              <div class="row q-col-gutter-md col-12">
+                <div class="col-xs-12 col-sm-5 row items-center q-my-xs">
+                  <div class="col-12 row">
+                    <div class="col-xs-5 col-sm-3 text-grey-8">ประเภทการลา</div>
+                    <div class="col text-primary">
+                      {{
+                        checkForm !== "FormUpasom" && checkForm !== "FormHajj"
+                          ? formData.leaveTypeName
+                          : formData.hajjDayStatus
+                          ? "ลาประกอบพิธีฮัจญ์"
+                          : "ลาอุปสมบท"
+                      }}
+                    </div>
+                  </div>
+                  <div class="col-12 row">
+                    <div class="col-xs-5 col-sm-3 text-grey-8">
+                      ชื่อ - นามสกุล
+                    </div>
+                    <div class="col text-weight-medium">
+                      {{ formData.fullName }}
+                    </div>
                   </div>
                 </div>
-                <div class="col-12 row">
-                  <div class="col-xs-5 col-sm-3 text-grey-8">
-                    ชื่อ - นามสกุล
-                  </div>
-                  <div class="col text-weight-medium">
-                    {{ formData.fullName }}
-                  </div>
-                </div>
-              </div>
-              <div class="col-xs-12 col-sm-7 row">
-                <div class="row col-12 q-gutter-md">
-                  <div
-                    v-if="formData.leaveTypeName == 'ลาพักผ่อน'"
-                    class="col-3"
-                  >
-                    <q-card bordered class="items-center row col-12 q-pa-md">
-                      <div class="text-h6 text-weight-bold text-blue-10">
-                        {{ formData.leaveLimit }}
-                      </div>
-                      <div class="col-12 text-subtitle2 text-weight-regular">
-                        <span class="gt-xs">ได้รับ</span>
-                      </div>
-                    </q-card>
-                  </div>
-                  <div class="col-3">
-                    <q-card bordered class="items-center row col-12 q-pa-md">
-                      <div class="text-h6 text-weight-bold text-light-blue-6">
-                        {{ formData.leaveSummary }}
-                      </div>
-                      <div class="col-12 text-subtitle2 text-weight-regular">
-                        <span class="gt-xs">ใช้ไป</span>
-                      </div>
-                    </q-card>
-                  </div>
-                  <div
-                    v-if="formData.leaveTypeName == 'ลาพักผ่อน'"
-                    class="col-3"
-                  >
-                    <q-card bordered class="items-center row col-12 q-pa-md">
-                      <div class="text-h6 text-weight-bold text-indigo-7">
-                        {{ formData.leaveRemain }}
-                      </div>
-                      <div class="col-12 text-subtitle2 text-weight-regular">
-                        <span class="gt-xs">คงเหลือ</span>
-                      </div>
-                    </q-card>
+                <div class="col-xs-12 col-sm-7 row">
+                  <div class="row col-12 q-gutter-md">
+                    <div
+                      v-if="formData.leaveTypeName == 'ลาพักผ่อน'"
+                      class="col-3"
+                    >
+                      <q-card bordered class="items-center row col-12 q-pa-md">
+                        <div class="text-h6 text-weight-bold text-blue-10">
+                          {{ formData.leaveLimit }}
+                        </div>
+                        <div class="col-12 text-subtitle2 text-weight-regular">
+                          <span class="gt-xs">ได้รับ</span>
+                        </div>
+                      </q-card>
+                    </div>
+                    <div class="col-3">
+                      <q-card bordered class="items-center row col-12 q-pa-md">
+                        <div class="text-h6 text-weight-bold text-light-blue-6">
+                          {{ formData.leaveSummary }}
+                        </div>
+                        <div class="col-12 text-subtitle2 text-weight-regular">
+                          <span class="gt-xs">ใช้ไป</span>
+                        </div>
+                      </q-card>
+                    </div>
+                    <div
+                      v-if="formData.leaveTypeName == 'ลาพักผ่อน'"
+                      class="col-3"
+                    >
+                      <q-card bordered class="items-center row col-12 q-pa-md">
+                        <div class="text-h6 text-weight-bold text-indigo-7">
+                          {{ formData.leaveRemain }}
+                        </div>
+                        <div class="col-12 text-subtitle2 text-weight-regular">
+                          <span class="gt-xs">คงเหลือ</span>
+                        </div>
+                      </q-card>
+                    </div>
                   </div>
                 </div>
               </div>
+            </q-card>
+          </div>
+
+          <!-- ข้อมูลการลา -->
+          <div class="row q-col-gutter-md col-12">
+            <!-- ข้อมูลซ้าย -->
+            <div class="col-xs-12 col-sm-5 row">
+              <!-- card ซ้าย -->
+              <q-card flat bordered class="col-12">
+                <FormMain :data="formData" :checkForm="checkForm" />
+              </q-card>
             </div>
-          </q-card>
-        </div>
-        <div class="row q-col-gutter-md col-12">
-          <div class="col-xs-12 col-sm-5 row">
-            <!-- card ซ้าย -->
-            <q-card flat bordered class="col-12">
-              <FormMain :data="formData" :checkForm="checkForm" />
-            </q-card>
-          </div>
-          <div class="col-xs-12 col-sm-7 row">
-            <q-card flat bordered class="col-12">
-              <!-- ลาป่วย ลาคลอดบุตร และลากิจส่วนตัว -->
-              <FormLeave v-if="checkForm === 'FormLeave'" :data="formData" />
+            <!-- ข้อมูลขวา -->
+            <div class="col-xs-12 col-sm-7 row">
+              <q-card flat bordered class="col-12">
+                <!-- ลาป่วย ลาคลอดบุตร และลากิจส่วนตัว -->
+                <FormLeave v-if="checkForm === 'FormLeave'" :data="formData" />
 
-              <!-- ลาไปช่วยเหลือภริยาที่คลอดบุตร -->
-              <FormChildbirth
-                v-else-if="checkForm === 'FormChildbirth'"
-                :data="formData"
-              />
+                <!-- ลาไปช่วยเหลือภริยาที่คลอดบุตร -->
+                <FormChildbirth
+                  v-else-if="checkForm === 'FormChildbirth'"
+                  :data="formData"
+                />
 
-              <!-- ลาพักผ่อน -->
-              <FormHoliday
-                v-else-if="checkForm === 'FormHoliday'"
-                :data="formData"
-              />
+                <!-- ลาพักผ่อน -->
+                <FormHoliday
+                  v-else-if="checkForm === 'FormHoliday'"
+                  :data="formData"
+                />
 
-              <!-- ลาอุปสมบท -->
-              <FormUpasom
-                v-else-if="checkForm === 'FormUpasom'"
-                :data="formData"
-              />
+                <!-- ลาอุปสมบท -->
+                <FormUpasom
+                  v-else-if="checkForm === 'FormUpasom'"
+                  :data="formData"
+                />
 
-              <!-- ลาประกอบพิธีฮัจญ์ -->
-              <FormHajj v-else-if="checkForm === 'FormHajj'" :data="formData" />
+                <!-- ลาประกอบพิธีฮัจญ์ -->
+                <FormHajj
+                  v-else-if="checkForm === 'FormHajj'"
+                  :data="formData"
+                />
 
-              <!-- ลาเข้ารับการตรวจเลือกหรือเข้ารับการเตรียมพล -->
-              <FormCheckSelect
-                v-else-if="checkForm === 'FormCheckSelect'"
-                :data="formData"
-              />
+                <!-- ลาเข้ารับการตรวจเลือกหรือเข้ารับการเตรียมพล -->
+                <FormCheckSelect
+                  v-else-if="checkForm === 'FormCheckSelect'"
+                  :data="formData"
+                />
 
-              <!-- ลาไปศึกษา -->
-              <FormStudy
-                v-else-if="checkForm === 'FormStudy'"
-                :data="formData"
-              />
+                <!-- ลาไปศึกษา -->
+                <FormStudy
+                  v-else-if="checkForm === 'FormStudy'"
+                  :data="formData"
+                />
 
-              <!-- ลาไปฝึกอบรม ปฏิบัติการวิจัย หรือดูงาน -->
-              <FormLeaveToTraining
-                v-else-if="checkForm === 'FormLeaveToTraining'"
-                :data="formData"
-              />
+                <!-- ลาไปฝึกอบรม ปฏิบัติการวิจัย หรือดูงาน -->
+                <FormLeaveToTraining
+                  v-else-if="checkForm === 'FormLeaveToTraining'"
+                  :data="formData"
+                />
 
-              <!-- ลาไปปฏิบัติงานในองค์การระหว่างประเทศ -->
-              <FormLeaveToWorkInternational
-                v-else-if="checkForm === 'FormLeaveToWorkInternational'"
-                :data="formData"
-              />
+                <!-- ลาไปปฏิบัติงานในองค์การระหว่างประเทศ -->
+                <FormLeaveToWorkInternational
+                  v-else-if="checkForm === 'FormLeaveToWorkInternational'"
+                  :data="formData"
+                />
 
-              <!-- ลาติดตามคู่สมรส -->
-              <FormSpouse
-                v-else-if="checkForm === 'FormSpouse'"
-                :data="formData"
-              />
+                <!-- ลาติดตามคู่สมรส -->
+                <FormSpouse
+                  v-else-if="checkForm === 'FormSpouse'"
+                  :data="formData"
+                />
 
-              <!-- ลาไปฟื้นฟูสมรรถภาพด้านอาชีพ -->
-              <FormVocationalRehabilitation
-                v-else-if="checkForm === 'FormVocationalRehabilitation'"
-                :data="formData"
-              />
-            </q-card>
-          </div>
-          <div class="col-xs-12 col-sm-12 row">
-            <q-card
-              bordered
-              class="row col-12 text-dark q-mt-sm"
+                <!-- ลาไปฟื้นฟูสมรรถภาพด้านอาชีพ -->
+                <FormVocationalRehabilitation
+                  v-else-if="checkForm === 'FormVocationalRehabilitation'"
+                  :data="formData"
+                />
+              </q-card>
+            </div>
+
+            <!-- ความคิดเห็นของผู้บังคับบัญชา -->
+            <!-- <div
+              class="col-xs-12 col-sm-12 row"
               v-if="
                 formData.approveStep === 'st3' ||
                 formData.approveStep === 'st4' ||
                 formData.approveStep === 'st5'
               "
             >
-              <div
-                class="bg-grey-1 q-pa-sm col-12 row items-center text-primary"
-              >
-                <div class="q-pl-sm text-weight-bold text-dark">
-                  ความคิดเห็นของผู้บังคับบัญชา
+              <q-card bordered class="row col-12 text-dark q-mt-sm">
+                <div
+                  class="bg-grey-1 q-pa-sm col-12 row items-center text-primary"
+                >
+                  <div class="q-pl-sm text-weight-bold text-dark">
+                    ความคิดเห็นของผู้บังคับบัญชา
+                  </div>
                 </div>
-              </div>
-              <q-separator />
-              <div class="row col-12 q-pa-md">
-                <div class="col-12 row bg-white q-col-gutter-md">
-                  <div class="col-xs-6 row items-start">
-                    <div class="col-12 text-detail">
-                      {{ formData.reasonCommander }}
+                <q-separator />
+                <div class="row col-12 q-pa-md">
+                  <div class="col-12 row bg-white q-col-gutter-md">
+                    <div class="col-xs-6 row items-start">
+                      <div class="col-12 text-detail">
+                        {{ formData.reasonCommander }}
+                      </div>
                     </div>
                   </div>
                 </div>
-              </div>
-            </q-card>
-          </div>
-          <div class="col-xs-12 col-sm-12 row">
-            <q-card
-              bordered
-              class="row col-12 text-dark q-mt-sm"
+              </q-card>
+            </div> -->
+
+            <!-- ความคิดเห็นของผู้มีอำนาจ -->
+            <!-- <div
+              class="col-xs-12 col-sm-12 row"
               v-if="
                 formData.approveStep === 'st4' || formData.approveStep === 'st5'
               "
             >
-              <div
-                class="bg-grey-1 q-pa-sm col-12 row items-center text-primary"
-              >
-                <div class="q-pl-sm text-weight-bold text-dark">
-                  ความคิดเห็นของผู้มีอำนาจ
-                </div>
-              </div>
-              <q-separator />
-              <div class="row col-12 q-pa-md">
-                <div class="col-12 row bg-white q-col-gutter-md">
-                  <div class="col-xs-6 row items-start">
-                    <div class="col-12 text-weight-bold text-top">
-                      ผลการพิจารณา
-                    </div>
-                    <div class="col-12 text-detail">{{ formData.status }}</div>
+              <q-card bordered class="row col-12 text-dark q-mt-sm">
+                <div
+                  class="bg-grey-1 q-pa-sm col-12 row items-center text-primary"
+                >
+                  <div class="q-pl-sm text-weight-bold text-dark">
+                    ความคิดเห็นของผู้มีอำนาจ
                   </div>
-                  <div class="col-xs-6 row items-start">
-                    <div class="col-12 text-weight-bold text-top">
-                      ความคิดเห็น
+                </div>
+                <q-separator />
+                <div class="row col-12 q-pa-md">
+                  <div class="col-12 row bg-white q-col-gutter-md">
+                    <div class="col-xs-6 row items-start">
+                      <div class="col-12 text-weight-bold text-top">
+                        ผลการพิจารณา
+                      </div>
+                      <div class="col-12 text-detail">
+                        {{ formData.status }}
+                      </div>
                     </div>
-                    <div class="col-12 text-detail">
-                      {{ formData.reasonOligarch }}
+                    <div class="col-xs-6 row items-start">
+                      <div class="col-12 text-weight-bold text-top">
+                        ความคิดเห็น
+                      </div>
+                      <div class="col-12 text-detail">
+                        {{ formData.reasonOligarch }}
+                      </div>
                     </div>
                   </div>
                 </div>
-              </div>
-            </q-card>
+              </q-card>
+            </div> -->
+          </div>
+
+          <!-- Workflow -->
+          <div class="col-xs-12 col-sm-12">
+            <WorkFlow ref="workflowRef" :id="paramsId" sys-name="LEAVE_LIST" />
           </div>
         </div>
       </div>
-    </div>
-    <q-separator v-if="checkPermission($route)?.attrIsUpdate" />
-    <div class="row q-pa-md q-gutter-md justify-end">
-      <q-btn
-        v-if="
-          formData.approveStep === 'st1' &&
-          formData.status !== 'ยกเลิก' &&
-          checkPermission($route)?.attrIsUpdate
-        "
-        unelevated
-        color="orange-5"
-        label="ส่งไปยังผู้บังคับบัญชา"
-        @click="sendToCommand"
-        ><q-tooltip>ส่งไปยังผู้บังคับบัญชา</q-tooltip>
-      </q-btn>
 
-      <q-btn
-        v-if="
-          formData.approveStep === 'st2' &&
-          formData.status !== 'ยกเลิก' &&
-          checkPermission($route)?.attrIsUpdate
-        "
-        unelevated
-        color="orange-5"
-        label="ส่งไปยังผู้มีอำนาจ"
-        @click="openModal('authority')"
-        ><q-tooltip>ส่งไปยังผู้มีอำนาจ</q-tooltip>
-      </q-btn>
+      <!-- <q-separator v-if="checkPermission($route)?.attrIsUpdate" /> -->
+      <!-- <div class="row q-pa-md q-gutter-md justify-end">
+        <q-btn
+          v-if="
+            formData.approveStep === 'st1' &&
+            formData.status !== 'ยกเลิก' &&
+            checkPermission($route)?.attrIsUpdate
+          "
+          unelevated
+          color="orange-5"
+          label="ส่งไปยังผู้บังคับบัญชา"
+          @click="sendToCommand"
+          ><q-tooltip>ส่งไปยังผู้บังคับบัญชา</q-tooltip>
+        </q-btn>
+
+        <q-btn
+          v-if="
+            formData.approveStep === 'st2' &&
+            formData.status !== 'ยกเลิก' &&
+            checkPermission($route)?.attrIsUpdate
+          "
+          unelevated
+          color="orange-5"
+          label="ส่งไปยังผู้มีอำนาจ"
+          @click="openModal('authority')"
+          ><q-tooltip>ส่งไปยังผู้มีอำนาจ</q-tooltip>
+        </q-btn>
+
+        <q-btn
+          v-if="
+            formData.approveStep === 'st3' &&
+            formData.status !== 'ยกเลิก' &&
+            checkPermission($route)?.attrIsUpdate
+          "
+          unelevated
+          color="orange-5"
+          label="ไม่อนุมัติ"
+          @click="openModal('UnApprove')"
+          ><q-tooltip>ไม่อนุมัติ</q-tooltip>
+        </q-btn>
+        <q-btn
+          v-if="
+            formData.approveStep === 'st3' &&
+            formData.status !== 'ยกเลิก' &&
+            checkPermission($route)?.attrIsUpdate
+          "
+          unelevated
+          color="primary"
+          label="อนุมัติ"
+          @click="openModal('approve')"
+          ><q-tooltip>อนุมัติ</q-tooltip>
+        </q-btn>
+      </div> -->
+    </q-card>
+  </div>
 
-      <q-btn
-        v-if="
-          formData.approveStep === 'st3' &&
-          formData.status !== 'ยกเลิก' &&
-          checkPermission($route)?.attrIsUpdate
-        "
-        unelevated
-        color="orange-5"
-        label="ไม่อนุมัติ"
-        @click="openModal('UnApprove')"
-        ><q-tooltip>ไม่อนุมัติ</q-tooltip>
-      </q-btn>
-      <q-btn
-        v-if="
-          formData.approveStep === 'st3' &&
-          formData.status !== 'ยกเลิก' &&
-          checkPermission($route)?.attrIsUpdate
-        "
-        unelevated
-        color="primary"
-        label="อนุมัติ"
-        @click="openModal('approve')"
-        ><q-tooltip>อนุมัติ</q-tooltip>
-      </q-btn>
-    </div>
-  </q-card>
   <DialogReason
     v-model:modal="modalApprove"
     :title="dialogTitle"

src/modules/09_leave/components/2_Leave/DetailLeaveReject.vue

@@ -31,6 +31,7 @@ import FormLeaveToTraining from "@/modules/09_leave/components/2_Leave/formDetai
 import FormLeaveToWorkInternational from "@/modules/09_leave/components/2_Leave/formDetail/formLeaveToWorkInternational.vue"; // ลาไปปฏิบัติงานในองค์การระหว่างประเทศ
 import FormSpouse from "@/modules/09_leave/components/2_Leave/formDetail/formSpouse.vue"; // ลาติดตามคู่สมรส
 import FormVocationalRehabilitation from "@/modules/09_leave/components/2_Leave/formDetail/formVocationalRehabilitation.vue"; //ลาไปฟื้นฟูสมรรถภาพด้านอาชีพ
+import WorkFlow from "@/components/Workflow/Main.vue";
 
 /** use */
 const $q = useQuasar();
@@ -150,8 +151,13 @@ const formData = reactive<FremData>({
 
 onMounted(async () => {
   if (paramsId) {
-    await fetchDetailDeleteLeave(paramsId);
-    await fetchDetailLeave(paramsId);
+    showLoader();
+    Promise.all([
+      fetchDetailDeleteLeave(paramsId),
+      fetchDetailLeave(paramsId),
+    ]).finally(() => {
+      hideLoader();
+    });
   }
 });
 
@@ -160,7 +166,6 @@ onMounted(async () => {
  * @param paramsId รับ ID จาก paramID
  */
 async function fetchDetailDeleteLeave(paramsId: string) {
-  showLoader();
   await http
     .get(config.API.leaveListDeleteByid(paramsId))
     .then((res) => {
@@ -183,18 +188,14 @@ async function fetchDetailDeleteLeave(paramsId: string) {
     })
     .catch((err) => {
       messageError($q, err);
-    })
-    .finally(() => {
-      hideLoader();
     });
 }
 
 async function fetchDetailLeave(paramsId: string) {
-  showLoader();
   await http
     .get(config.API.leaveListById(paramsId))
     .then(async (res) => {
-      const data = res.data.result;
+      const data = await res.data.result;
       formData.id = data.id;
       formData.reasonCommander = data.reasonCommander;
       formData.reasonOligarch = data.reasonOligarch;
@@ -278,9 +279,6 @@ async function fetchDetailLeave(paramsId: string) {
     })
     .catch((err) => {
       messageError($q, err);
-    })
-    .finally(() => {
-      hideLoader();
     });
 }
 
@@ -413,6 +411,7 @@ async function onClickDownloadFile(id: string, fileName: string, type: string) {
     });
 }
 </script>
+
 <template>
   <div class="toptitle text-dark col-12 row items-center">
     <div class="row col-12 q-col-gutter-sm q-mb-sm">
@@ -473,257 +472,275 @@ async function onClickDownloadFile(id: string, fileName: string, type: string) {
       <q-space />
     </div>
   </div>
-  <q-card flat bordered class="col-12 q-mt-sm">
-    <div class="col-12 row q-py-md q-pl-md">
-      <div class="col-12 q-col-gutter-md">
-        <div class="col-xs-12 col-sm-12 row">
-          <q-card bordered class="row col-12 text-dark q-mt-sm">
-            <div class="bg-grey-1 q-pa-sm col-12 row items-center text-primary">
-              <div class="q-pl-sm text-weight-bold text-dark">
-                รายละเอียดการขอยกเลิก
-              </div>
-            </div>
-            <q-separator />
-            <div class="row col-12 q-pa-md">
-              <div class="col-12 row bg-white q-col-gutter-md">
-                <div class="col-xs-3 row items-start">
-                  <div class="col-12 text-weight-bold text-top">เขียนที่</div>
-                  <div class="col-12 text-detail">
-                    {{ formDataReject.leaveWrote }}
-                  </div>
-                </div>
-                <div class="col-xs-3 row items-start">
-                  <div class="col-12 text-weight-bold text-top">วันที่</div>
-                  <div class="col-12 text-detail">
-                    {{ date2Thai(formDataReject.leaveStartDate) }}
-                  </div>
-                </div>
-                <div class="col-xs-3 row items-start">
-                  <div class="col-12 text-weight-bold text-top">เหตุผล</div>
-                  <div class="col-12 text-detail">
-                    {{ formDataReject.leaveReasonDelete }}
-                  </div>
-                </div>
-                <div class="col-xs-3 row items-start">
-                  <div class="col-12 text-weight-bold text-top">
-                    เอกสารประกอบ
-                  </div>
-                  <div class="col-12 text-detail">
-                    <q-btn
-                      v-if="formDataReject.leaveDocDelete"
-                      :href="formDataReject.leaveDocDelete"
-                      target="_blank"
-                      outline
-                      color="blue"
-                      label="ดาวน์โหลด"
-                      size="12px"
-                    >
-                      <q-tooltip>ดาวน์โหลดไฟล์</q-tooltip></q-btn
-                    >
-                    <span v-else>-</span>
-                  </div>
-                </div>
-              </div>
-            </div>
-          </q-card>
-        </div>
-        <div class="row col-12">
-          <q-card bordered class="bg-grey-1 q-pa-md col-12">
-            <div class="row q-col-gutter-md col-12">
-              <div class="col-xs-12 col-sm-5 row items-center q-my-xs">
-                <div class="col-12 row">
-                  <div class="col-xs-5 col-sm-3 text-grey-8">ประเภทการลา</div>
-                  <div class="col text-primary">
-                    {{ formData.leaveTypeName }}
-                  </div>
-                </div>
-                <div class="col-12 row">
-                  <div class="col-xs-5 col-sm-3 text-grey-8">
-                    ชื่อ - นามสกุล
-                  </div>
-                  <div class="col text-weight-medium">
-                    {{ formData.fullName }}
-                  </div>
-                </div>
-              </div>
-              <div class="col-xs-12 col-sm-7 row">
-                <div class="row col-12 q-gutter-md">
-                  <div
-                    v-if="formData.leaveTypeName == 'ลาพักผ่อน'"
-                    class="col-3"
-                  >
-                    <q-card bordered class="items-center row col-12 q-pa-md">
-                      <div class="text-h6 text-weight-bold text-blue-10">
-                        {{ formData.leaveLimit }}
-                      </div>
-                      <div class="col-12 text-subtitle2 text-weight-regular">
-                        <span class="gt-xs">ได้รับ</span>
-                      </div>
-                    </q-card>
-                  </div>
-                  <div class="col-3">
-                    <q-card bordered class="items-center row col-12 q-pa-md">
-                      <div class="text-h6 text-weight-bold text-light-blue-6">
-                        {{ formData.leaveSummary }}
-                      </div>
-                      <div class="col-12 text-subtitle2 text-weight-regular">
-                        <span class="gt-xs">ใช้ไป</span>
-                      </div>
-                    </q-card>
-                  </div>
-                  <div
-                    v-if="formData.leaveTypeName == 'ลาพักผ่อน'"
-                    class="col-3"
-                  >
-                    <q-card bordered class="items-center row col-12 q-pa-md">
-                      <div class="text-h6 text-weight-bold text-indigo-7">
-                        {{ formData.leaveRemain }}
-                      </div>
-                      <div class="col-12 text-subtitle2 text-weight-regular">
-                        <span class="gt-xs">คงเหลือ</span>
-                      </div>
-                    </q-card>
-                  </div>
-                </div>
-              </div>
-            </div>
-          </q-card>
-        </div>
-        <div class="row q-col-gutter-md col-12">
-          <div class="col-xs-12 col-sm-5 row">
-            <!-- card ซ้าย -->
-            <q-card flat bordered class="col-12">
-              <FormMain :data="formData" />
-            </q-card>
-          </div>
-          <div class="col-xs-12 col-sm-7 row">
-            <q-card flat bordered class="col-12">
-              <!-- ลาป่วย ลาคลอดบุตร และลากิจส่วนตัว -->
-              <FormLeave v-if="checkForm === 'FormLeave'" :data="formData" />
 
-              <!-- ลาไปช่วยเหลือภริยาที่คลอดบุตร -->
-              <FormChildbirth
-                v-else-if="checkForm === 'FormChildbirth'"
-                :data="formData"
-              />
-
-              <!-- ลาพักผ่อน -->
-              <FormHoliday
-                v-else-if="checkForm === 'FormHoliday'"
-                :data="formData"
-              />
-
-              <!-- ลาอุปสมบท -->
-              <FormUpasom
-                v-else-if="checkForm === 'FormUpasom'"
-                :data="formData"
-              />
-
-              <!-- ลาประกอบพิธีฮัจญ์ -->
-              <FormHajj v-else-if="checkForm === 'FormHajj'" :data="formData" />
-
-              <!-- ลาเข้ารับการตรวจเลือกหรือเข้ารับการเตรียมพล -->
-              <FormCheckSelect
-                v-else-if="checkForm === 'FormCheckSelect'"
-                :data="formData"
-              />
-
-              <!-- ลาไปศึกษา -->
-              <FormStudy
-                v-else-if="checkForm === 'FormStudy'"
-                :data="formData"
-              />
-
-              <!-- ลาไปฝึกอบรม ปฏิบัติการวิจัย หรือดูงาน -->
-              <FormLeaveToTraining
-                v-else-if="checkForm === 'FormLeaveToTraining'"
-                :data="formData"
-              />
-
-              <!-- ลาไปปฏิบัติงานในองค์การระหว่างประเทศ -->
-              <FormLeaveToWorkInternational
-                v-else-if="checkForm === 'FormLeaveToWorkInternational'"
-                :data="formData"
-              />
-
-              <!-- ลาติดตามคู่สมรส -->
-              <FormSpouse
-                v-else-if="checkForm === 'FormSpouse'"
-                :data="formData"
-              />
-
-              <!-- ลาไปฟื้นฟูสมรรถภาพด้านอาชีพ -->
-              <FormVocationalRehabilitation
-                v-else-if="checkForm === 'FormVocationalRehabilitation'"
-                :data="formData"
-              />
-            </q-card>
-          </div>
+  <div class="q-pa-sm">
+    <q-card flat bordered class="col-12">
+      <div class="col-12 row q-py-md q-pl-md">
+        <div class="col-12 q-col-gutter-md">
           <div class="col-xs-12 col-sm-12 row">
-            <q-card
-              bordered
-              class="row col-12 text-dark q-mt-sm"
-              v-if="formDataReject.status !== 'NEW'"
-            >
+            <q-card bordered class="row col-12 text-dark q-mt-sm">
               <div
                 class="bg-grey-1 q-pa-sm col-12 row items-center text-primary"
               >
                 <div class="q-pl-sm text-weight-bold text-dark">
-                  ความคิดเห็นของผู้มีอำนาจ
+                  รายละเอียดการขอยกเลิก
                 </div>
               </div>
               <q-separator />
               <div class="row col-12 q-pa-md">
                 <div class="col-12 row bg-white q-col-gutter-md">
-                  <div class="col-xs-6 row items-start">
-                    <div class="col-12 text-weight-bold text-top">
-                      ผลการพิจารณา
-                    </div>
+                  <div class="col-xs-3 row items-start">
+                    <div class="col-12 text-weight-bold text-top">เขียนที่</div>
                     <div class="col-12 text-detail">
-                      {{ stores.convertSatatus(formDataReject.status) }}
+                      {{ formDataReject.leaveWrote }}
                     </div>
                   </div>
-                  <div class="col-xs-6 row items-start">
-                    <div class="col-12 text-weight-bold text-top">
-                      ความคิดเห็น
+                  <div class="col-xs-3 row items-start">
+                    <div class="col-12 text-weight-bold text-top">วันที่</div>
+                    <div class="col-12 text-detail">
+                      {{ date2Thai(formDataReject.leaveStartDate) }}
                     </div>
+                  </div>
+                  <div class="col-xs-3 row items-start">
+                    <div class="col-12 text-weight-bold text-top">เหตุผล</div>
                     <div class="col-12 text-detail">
                       {{ formDataReject.leaveReasonDelete }}
                     </div>
                   </div>
+                  <div class="col-xs-3 row items-start">
+                    <div class="col-12 text-weight-bold text-top">
+                      เอกสารประกอบ
+                    </div>
+                    <div class="col-12 text-detail">
+                      <q-btn
+                        v-if="formDataReject.leaveDocDelete"
+                        :href="formDataReject.leaveDocDelete"
+                        target="_blank"
+                        outline
+                        color="blue"
+                        label="ดาวน์โหลด"
+                        size="12px"
+                      >
+                        <q-tooltip>ดาวน์โหลดไฟล์</q-tooltip></q-btn
+                      >
+                      <span v-else>-</span>
+                    </div>
+                  </div>
                 </div>
               </div>
             </q-card>
           </div>
+
+          <div class="row col-12">
+            <q-card bordered class="bg-grey-1 q-pa-md col-12">
+              <div class="row q-col-gutter-md col-12">
+                <div class="col-xs-12 col-sm-5 row items-center q-my-xs">
+                  <div class="col-12 row">
+                    <div class="col-xs-5 col-sm-3 text-grey-8">ประเภทการลา</div>
+                    <div class="col text-primary">
+                      {{ formData.leaveTypeName }}
+                    </div>
+                  </div>
+                  <div class="col-12 row">
+                    <div class="col-xs-5 col-sm-3 text-grey-8">
+                      ชื่อ - นามสกุล
+                    </div>
+                    <div class="col text-weight-medium">
+                      {{ formData.fullName }}
+                    </div>
+                  </div>
+                </div>
+                <div class="col-xs-12 col-sm-7 row">
+                  <div class="row col-12 q-gutter-md">
+                    <div
+                      v-if="formData.leaveTypeName == 'ลาพักผ่อน'"
+                      class="col-3"
+                    >
+                      <q-card bordered class="items-center row col-12 q-pa-md">
+                        <div class="text-h6 text-weight-bold text-blue-10">
+                          {{ formData.leaveLimit }}
+                        </div>
+                        <div class="col-12 text-subtitle2 text-weight-regular">
+                          <span class="gt-xs">ได้รับ</span>
+                        </div>
+                      </q-card>
+                    </div>
+                    <div class="col-3">
+                      <q-card bordered class="items-center row col-12 q-pa-md">
+                        <div class="text-h6 text-weight-bold text-light-blue-6">
+                          {{ formData.leaveSummary }}
+                        </div>
+                        <div class="col-12 text-subtitle2 text-weight-regular">
+                          <span class="gt-xs">ใช้ไป</span>
+                        </div>
+                      </q-card>
+                    </div>
+                    <div
+                      v-if="formData.leaveTypeName == 'ลาพักผ่อน'"
+                      class="col-3"
+                    >
+                      <q-card bordered class="items-center row col-12 q-pa-md">
+                        <div class="text-h6 text-weight-bold text-indigo-7">
+                          {{ formData.leaveRemain }}
+                        </div>
+                        <div class="col-12 text-subtitle2 text-weight-regular">
+                          <span class="gt-xs">คงเหลือ</span>
+                        </div>
+                      </q-card>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </q-card>
+          </div>
+
+          <div class="row q-col-gutter-md col-12">
+            <div class="col-xs-12 col-sm-5 row">
+              <!-- card ซ้าย -->
+              <q-card flat bordered class="col-12">
+                <FormMain :data="formData" />
+              </q-card>
+            </div>
+            <!-- ข้อมูลการลา -->
+            <div class="col-xs-12 col-sm-7 row">
+              <q-card flat bordered class="col-12">
+                <!-- ลาป่วย ลาคลอดบุตร และลากิจส่วนตัว -->
+                <FormLeave v-if="checkForm === 'FormLeave'" :data="formData" />
+
+                <!-- ลาไปช่วยเหลือภริยาที่คลอดบุตร -->
+                <FormChildbirth
+                  v-else-if="checkForm === 'FormChildbirth'"
+                  :data="formData"
+                />
+
+                <!-- ลาพักผ่อน -->
+                <FormHoliday
+                  v-else-if="checkForm === 'FormHoliday'"
+                  :data="formData"
+                />
+
+                <!-- ลาอุปสมบท -->
+                <FormUpasom
+                  v-else-if="checkForm === 'FormUpasom'"
+                  :data="formData"
+                />
+
+                <!-- ลาประกอบพิธีฮัจญ์ -->
+                <FormHajj
+                  v-else-if="checkForm === 'FormHajj'"
+                  :data="formData"
+                />
+
+                <!-- ลาเข้ารับการตรวจเลือกหรือเข้ารับการเตรียมพล -->
+                <FormCheckSelect
+                  v-else-if="checkForm === 'FormCheckSelect'"
+                  :data="formData"
+                />
+
+                <!-- ลาไปศึกษา -->
+                <FormStudy
+                  v-else-if="checkForm === 'FormStudy'"
+                  :data="formData"
+                />
+
+                <!-- ลาไปฝึกอบรม ปฏิบัติการวิจัย หรือดูงาน -->
+                <FormLeaveToTraining
+                  v-else-if="checkForm === 'FormLeaveToTraining'"
+                  :data="formData"
+                />
+
+                <!-- ลาไปปฏิบัติงานในองค์การระหว่างประเทศ -->
+                <FormLeaveToWorkInternational
+                  v-else-if="checkForm === 'FormLeaveToWorkInternational'"
+                  :data="formData"
+                />
+
+                <!-- ลาติดตามคู่สมรส -->
+                <FormSpouse
+                  v-else-if="checkForm === 'FormSpouse'"
+                  :data="formData"
+                />
+
+                <!-- ลาไปฟื้นฟูสมรรถภาพด้านอาชีพ -->
+                <FormVocationalRehabilitation
+                  v-else-if="checkForm === 'FormVocationalRehabilitation'"
+                  :data="formData"
+                />
+              </q-card>
+            </div>
+
+            <!-- ความคิดเห็นของผู้มีอำนาจ -->
+            <div
+              class="col-xs-12 col-sm-12 row"
+              v-if="formDataReject.status !== 'NEW'"
+            >
+              <q-card bordered class="row col-12 text-dark q-mt-sm">
+                <div
+                  class="bg-grey-1 q-pa-sm col-12 row items-center text-primary"
+                >
+                  <div class="q-pl-sm text-weight-bold text-dark">
+                    ความคิดเห็นของผู้มีอำนาจ
+                  </div>
+                </div>
+                <q-separator />
+                <div class="row col-12 q-pa-md">
+                  <div class="col-12 row bg-white q-col-gutter-md">
+                    <div class="col-xs-6 row items-start">
+                      <div class="col-12 text-weight-bold text-top">
+                        ผลการพิจารณา
+                      </div>
+                      <div class="col-12 text-detail">
+                        {{ stores.convertSatatus(formDataReject.status) }}
+                      </div>
+                    </div>
+                    <div class="col-xs-6 row items-start">
+                      <div class="col-12 text-weight-bold text-top">
+                        ความคิดเห็น
+                      </div>
+                      <div class="col-12 text-detail">
+                        {{ formDataReject.leaveReasonDelete }}
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </q-card>
+            </div>
+          </div>
+
+          <!-- Workflow -->
+          <div class="col-xs-12 col-sm-12">
+            <WorkFlow ref="workflowRef" :id="paramsId" sys-name="LEAVE_LIST" />
+          </div>
         </div>
       </div>
-    </div>
-    <q-separator v-if="checkPermission($route)?.attrIsUpdate" />
-    <div class="row q-pa-md q-gutter-md justify-end">
-      <q-btn
-        v-if="
-          formDataReject.status === 'NEW' &&
-          checkPermission($route)?.attrIsUpdate
-        "
-        unelevated
-        color="orange-5"
-        label="ไม่อนุมัติการยกเลิก"
-        @click="openModal('UnApprove')"
-        ><q-tooltip>ไม่อนุมัติการยกเลิก</q-tooltip>
-      </q-btn>
-      <q-btn
-        v-if="
-          formDataReject.status === 'NEW' &&
-          checkPermission($route)?.attrIsUpdate
-        "
-        unelevated
-        color="primary"
-        label="อนุมัติการยกเลิก"
-        @click="openModal('approve')"
-        ><q-tooltip>อนุมัติการยกเลิก</q-tooltip>
-      </q-btn>
-    </div>
-  </q-card>
+      <q-separator v-if="checkPermission($route)?.attrIsUpdate" />
+      <div class="row q-pa-md q-gutter-md justify-end">
+        <q-btn
+          v-if="
+            formDataReject.status === 'NEW' &&
+            checkPermission($route)?.attrIsUpdate
+          "
+          unelevated
+          color="orange-5"
+          label="ไม่อนุมัติการยกเลิก"
+          @click="openModal('UnApprove')"
+          ><q-tooltip>ไม่อนุมัติการยกเลิก</q-tooltip>
+        </q-btn>
+        <q-btn
+          v-if="
+            formDataReject.status === 'NEW' &&
+            checkPermission($route)?.attrIsUpdate
+          "
+          unelevated
+          color="primary"
+          label="อนุมัติการยกเลิก"
+          @click="openModal('approve')"
+          ><q-tooltip>อนุมัติการยกเลิก</q-tooltip>
+        </q-btn>
+      </div>
+    </q-card>
+  </div>
+
   <DialogReason
     v-model:modal="modalApprove"
     :title="dialogTitle"

src/modules/09_leave/components/2_Leave/Tab1.vue

@@ -36,6 +36,7 @@ const totalList = ref<number>(0);
 
 //** เรียกข้อมูลจาก API*/
 async function fecthLeaveList() {
+  leaveStore.rows = [];
   querySting.status = await (querySting.status == null
     ? "ALL"
     : querySting.status);

src/modules/09_leave/components/2_Leave/Tab2.vue

@@ -36,6 +36,7 @@ const totalList = ref<number>(0);
 
 //** เรียกข้อมูลจาก API*/
 async function fecthLeaveList() {
+  leaveStore.rows = [];
   querySting.status = await (querySting.status == null
     ? "ALL"
     : querySting.status);