From 23be6c5fb85ffe6753066212e77b03186cdf341e Mon Sep 17 00:00:00 2001
From: "DESKTOP-1R2VSQH\\Lenovo ThinkPad E490" <nicey2t1096@gmail.com>
Date: Thu, 25 Apr 2024 12:06:07 +0700
Subject: [PATCH] =?UTF-8?q?=E0=B8=AD=E0=B8=AD=E0=B8=81=E0=B8=84=E0=B8=B3?=
 =?UTF-8?q?=E0=B8=AA=E0=B8=B1=E0=B9=88=E0=B8=87=E0=B9=80=E0=B8=A5=E0=B8=B7?=
 =?UTF-8?q?=E0=B9=88=E0=B8=AD=E0=B8=99=E0=B9=80=E0=B8=87=E0=B8=B4=E0=B8=99?=
 =?UTF-8?q?=E0=B9=80=E0=B8=94=E0=B8=B7=E0=B8=AD=E0=B8=99/=E0=B8=84?=
 =?UTF-8?q?=E0=B9=88=E0=B8=B2=E0=B8=88=E0=B9=89=E0=B8=B2=E0=B8=87?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../13_salary/components/Command/step01.vue   |  190 ++-
 .../13_salary/components/Command/step02.vue   |   12 +-
 .../13_salary/components/Command/step03.vue   |    8 +-
 .../13_salary/components/Command/step04.vue   | 1026 ++++++++---------
 src/modules/13_salary/views/commandSalary.vue |   20 +-
 5 files changed, 699 insertions(+), 557 deletions(-)

diff --git a/src/modules/13_salary/components/Command/step01.vue b/src/modules/13_salary/components/Command/step01.vue
index 400df8b0a..4b5c6b7e7 100644
--- a/src/modules/13_salary/components/Command/step01.vue
+++ b/src/modules/13_salary/components/Command/step01.vue
@@ -32,7 +32,7 @@ const $q = useQuasar(); //ใช้ noti quasar
 const route = useRoute();
 const router = useRouter();
 
-const orderId = route.params.orderid;
+const orderId = route.params.id;
 const orderId_paramsName = route.name;
 
 const props = defineProps({
@@ -50,8 +50,11 @@ const next = () => props.next();
 const myForm = ref<QForm>();
 //option
 const typeOrderOption = ref<DataOption1[]>([]);
+const byOrderOptionMain = ref<DataOption1[]>([]);
 const byOrderOption = ref<DataOption1[]>([]);
 const CommandOption = ref<DataOption1[]>([]);
+const salaryRoundOptionMain = ref<DataOption1[]>([]);
+const salaryRoundOption = ref<DataOption1[]>([]);
 
 //Main
 const typeOrder = ref<any>([]);
@@ -62,6 +65,8 @@ const dateCommand = ref<Date>(new Date());
 const byOrder = ref<string>("");
 const nameCommand = ref<any>([]);
 const positionCommand = ref<string>("");
+const year = ref<number>(0);
+const SalaryRound = ref<string>("");
 
 // 33-34-35
 const input33 = ref<string>("");
@@ -78,6 +83,9 @@ onMounted(async () => {
   } else {
     await fecthTypeOption("noData");
   }
+  if (year.value !== 0) {
+    fetchSalaryRound();
+  }
 });
 // เลือกคำสั่งโดย
 watch(byOrder, async () => {
@@ -97,9 +105,17 @@ watch(nameCommand, async () => {
   }
 });
 
-const commandCodes = ref<string[]>(["C-PM-33", "C-PM-34", "C-PM-35","C-PM-36","C-PM-37"]);
+const commandCodes = ref<string[]>([
+  "C-PM-33",
+  "C-PM-34",
+  "C-PM-35",
+  "C-PM-36",
+  "C-PM-37",
+]);
 // เรียกคำสั่ง
 const fecthTypeOption = async (actions: string) => {
+  console.log(actions);
+
   showLoader();
   await http
     .get(config.API.typeOrder())
@@ -149,6 +165,8 @@ const fetchdetailOrder = async () => {
     .then(async (res: any) => {
       const data = res.data.result;
 
+      console.log(data);
+
       const orderTypeCode = await data.orderTypeCode.toUpperCase();
 
       typeOrder.value = typeOrderOption.value.find(
@@ -175,6 +193,7 @@ const fecthCommand = async () => {
   await http
     .get(config.API.organizationsOrder())
     .then((res) => {
+      byOrderOptionMain.value = res.data.result;
       byOrderOption.value = res.data.result;
     })
     .catch((e) => {
@@ -182,30 +201,32 @@ const fecthCommand = async () => {
     });
 };
 
-function casePm(val: string){
-    switch (val) {
-      case "C-PM-33":
-        return "เลื่อนเงินเดือนและให้ข้าราชการกรุงเทพมหานครสามัญ ได้รับเงินเดือนสูงกว่าขั้นสูงของตำแหน่งที่ได้รับแต่งตั้ง";
-      case "C-PM-34":
-        return "ให้ข้าราชการกรุงเทพมหานครสามัญได้รับค่าตอบแทนพิเศษ";
-      case "C-PM-35":
-        return `เลื่อนเงินเดือนและให้ข้าราชการกรุงเทพมหานครสามัญที่เกษียณอายุราชการ ในสิ้นปีงบประมาณ พ.ศ. ${new Date().getFullYear()+543} ได้รับเงินเดือนสูงกว่าชั้นสูงของตำแหน่งที่ได้รับแต่งตั้ง`;
-        case "C-PM-36":
-        return "เลื่อนขั้นค่าจ้างและให้ลูกจ้างประจำกรุงเทพมหานครได้รับอัตราค่าจ้าง สูงกว่าอัตราค่าจ้างขั้นสูงของตำแหน่งที่ได้รับแต่งตั้งในแต่ละระดับ";
-        case "C-PM-37":
-        return "ให้ลูกจ้างประจำกรุงเทพมหานครได้รับค่าตอบแทนพิเศษ";
-        default:
-        return null;
-    }}
+function casePm(val: string) {
+  switch (val) {
+    case "C-PM-33":
+      return "เลื่อนเงินเดือนและให้ข้าราชการกรุงเทพมหานครสามัญ ได้รับเงินเดือนสูงกว่าขั้นสูงของตำแหน่งที่ได้รับแต่งตั้ง";
+    case "C-PM-34":
+      return "ให้ข้าราชการกรุงเทพมหานครสามัญได้รับค่าตอบแทนพิเศษ";
+    case "C-PM-35":
+      return `เลื่อนเงินเดือนและให้ข้าราชการกรุงเทพมหานครสามัญที่เกษียณอายุราชการ ในสิ้นปีงบประมาณ พ.ศ. ${
+        new Date().getFullYear() + 543
+      } ได้รับเงินเดือนสูงกว่าชั้นสูงของตำแหน่งที่ได้รับแต่งตั้ง`;
+    case "C-PM-36":
+      return "เลื่อนขั้นค่าจ้างและให้ลูกจ้างประจำกรุงเทพมหานครได้รับอัตราค่าจ้าง สูงกว่าอัตราค่าจ้างขั้นสูงของตำแหน่งที่ได้รับแต่งตั้งในแต่ละระดับ";
+    case "C-PM-37":
+      return "ให้ลูกจ้างประจำกรุงเทพมหานครได้รับค่าตอบแทนพิเศษ";
+    default:
+      return null;
+  }
+}
 
 async function selectCMP(selectOrder: OrederResult) {
   if (selectOrder != null) {
     const orderTypeCode = await selectOrder.commandCode.toUpperCase();
-    nameOrder.value = casePm(orderTypeCode)
+    nameOrder.value = casePm(orderTypeCode);
   }
 }
 
-
 // บันทึกข้อมูล
 const submit = async () => {
   let signBy = null;
@@ -237,6 +258,8 @@ const submit = async () => {
     registerPosition: "",
     signatoryBy: signBy === "" ? nameCommand.value : signBy,
     signatoryPosition: positionCommand.value,
+    year: year.value,
+    period: SalaryRound.value,
   };
   if (
     typeOrder.value.commandCode == "C-PM-33" ||
@@ -307,11 +330,33 @@ const updateOrder = async (formData: Object, orderId: string, type: string) => {
 };
 
 function filterSelector(val: any, update: Function, fullname: any) {
-  update(() => {
-    typeOrderOption.value = typeOrderFilter.value.filter(
-      (v: any) => v.fullname.toLowerCase().indexOf(val.toLowerCase()) > -1
-    );
-  });
+  switch (fullname) {
+    case "typeOrderOption":
+      update(() => {
+        typeOrderOption.value = typeOrderFilter.value.filter(
+          (v: any) => v.fullname.toLowerCase().indexOf(val.toLowerCase()) > -1
+        );
+      });
+      break;
+    case "byOrderOption":
+      update(() => {
+        byOrderOption.value = byOrderOptionMain.value.filter(
+          (v: any) => v.name.toLowerCase().indexOf(val.toLowerCase()) > -1
+        );
+      });
+      break;
+
+    case "SalaryRound":
+      update(() => {
+        salaryRoundOption.value = salaryRoundOptionMain.value.filter(
+          (v: any) => v.name.toLowerCase().indexOf(val.toLowerCase()) > -1
+        );
+      });
+      break;
+
+    default:
+      break;
+  }
 }
 
 /**
@@ -324,6 +369,40 @@ function getClass(val: boolean) {
     "full-width cursor-pointer": !val,
   };
 }
+
+function updateYear() {}
+
+/** ดึงข้อมูลเริ่มต้น */
+function fetchSalaryRound() {
+  showLoader();
+  http
+    .get(
+      config.API.salaryPeriod() +
+        `?page=${1}&pageSise=${10}&keyword=${""}&year=${year.value}`
+    )
+    .then((res) => {
+      const data = res.data.result.data;
+      const list = data.map((e: any) => ({
+        id: e.id,
+        name:
+          e.period === "SPECIAL"
+            ? "รอบพิเศษ"
+            : e.period === "APR"
+            ? "รอบเมษายน"
+            : e.period === "OCT"
+            ? "รอบตุลาคม"
+            : "-",
+      }));
+      salaryRoundOptionMain.value = list;
+      // salaryRoundOption.value = list;
+    })
+    .catch((err) => {
+      messageError($q, err);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+}
 </script>
 <template>
   <div style="max-height: 68vh; overflow-y: scroll">
@@ -391,6 +470,7 @@ function getClass(val: boolean) {
               }}</template>
               <template #trigger>
                 <q-input
+                  class="inputgreen"
                   :model-value="dateYear + 543"
                   :rules="[(val) => !!val || `${'กรุณากรอก พ.ศ.'}`]"
                   :label="`${'พ.ศ.'}`"
@@ -422,7 +502,7 @@ function getClass(val: boolean) {
               <q-input
                 outlined
                 dense
-                class="full-width datepicker"
+                class="inputgreen"
                 :model-value="
                   dateCommand != null ? date2Thai(dateCommand) : null
                 "
@@ -458,6 +538,9 @@ function getClass(val: boolean) {
             use-input
             input-debounce="0"
             @update:model-value="(nameCommand = ''), (positionCommand = '')"
+            @filter="(inputValue:any,
+                      doneFn:Function) => filterSelector(inputValue, doneFn,'byOrderOption'
+                      ) "
           />
         </div>
         <div
@@ -531,6 +614,63 @@ function getClass(val: boolean) {
             hide-bottom-space
           />
         </div>
+
+        <div class="col-xs-12 col-md-2">
+          <datepicker
+            menu-class-name="modalfix"
+            v-model="year"
+            :locale="'th'"
+            autoApply
+            year-picker
+            :enableTimePicker="false"
+            @update:model-value="fetchSalaryRound(), (SalaryRound = '')"
+          >
+            <template #year="{ year }">{{ year + 543 }}</template>
+            <template #year-overlay-value="{ value }">{{
+              parseInt(value + 543)
+            }}</template>
+            <template #trigger>
+              <q-input
+                dense
+                lazy-rules
+                outlined
+                :model-value="year === 0 ? null : Number(year) + 543"
+                :label="`${'ปีงบประมาณ'}`"
+                class="inputgreen"
+              >
+                <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-xs-12 col-md-4">
+          <q-select
+            class="inputgreen"
+            outlined
+            dense
+            v-model="SalaryRound"
+            :rules="[(val: string) => !!val || `${'กรุณาเลือกรอบการขึ้นเงินเดือน'}`]"
+            hide-bottom-space
+            :label="`${'รอบการขึ้นเงินเดือน'}`"
+            map-options
+            option-label="name"
+            :options="salaryRoundOption"
+            option-value="id"
+            use-input
+            input-debounce="0"
+            map-value
+            @filter="(inputValue:any,
+                      doneFn:Function) => filterSelector(inputValue, doneFn,'SalaryRound'
+                      ) "
+          />
+        </div>
       </div>
     </q-form>
   </div>
diff --git a/src/modules/13_salary/components/Command/step02.vue b/src/modules/13_salary/components/Command/step02.vue
index 480cba450..ca0e97142 100644
--- a/src/modules/13_salary/components/Command/step02.vue
+++ b/src/modules/13_salary/components/Command/step02.vue
@@ -103,8 +103,8 @@ onMounted(async () => {
 });
 
 const conditionData = async () => {
-  const id = route.params.orderid
-    ? route.params.orderid.toString()
+  const id = route.params.id
+    ? route.params.id.toString()
     : localStorage.getItem("orderId")
     ? localStorage.getItem("orderId")
     : null;
@@ -336,8 +336,8 @@ const putSalary = async (salary: any) => {
 const modalAddChange = async () => {
   modalAdd.value = !modalAdd.value;
   if (modalAdd.value == true) {
-    const id = route.params.orderid
-      ? route.params.orderid.toString()
+    const id = route.params.id
+      ? route.params.id.toString()
       : localStorage.getItem("orderId")
       ? localStorage.getItem("orderId")
       : null;
@@ -394,8 +394,8 @@ const saveModalAdd = () => {
 };
 // เพิ่มรายชื่อ API
 const addlist = async (data: Object) => {
-  const id = route.params.orderid
-    ? route.params.orderid.toString()
+  const id = route.params.id
+    ? route.params.id.toString()
     : localStorage.getItem("orderId")
     ? localStorage.getItem("orderId")
     : null;
diff --git a/src/modules/13_salary/components/Command/step03.vue b/src/modules/13_salary/components/Command/step03.vue
index a9158b8b7..1feca371a 100644
--- a/src/modules/13_salary/components/Command/step03.vue
+++ b/src/modules/13_salary/components/Command/step03.vue
@@ -190,8 +190,8 @@ const listModal = async (id: string) => {
 };
 // เช็คค่า orderid
 const conditionId = async () => {
-  const id = route.params.orderid
-    ? route.params.orderid.toString()
+  const id = route.params.id
+    ? route.params.id.toString()
     : localStorage.getItem("orderId")
     ? localStorage.getItem("orderId")
     : null;
@@ -245,8 +245,8 @@ const getData = async (id: string) => {
 };
 // เลือกรายชื่อจากหน่วยงาน
 const saveData = async () => {
-  const id = route.params.orderid
-    ? route.params.orderid.toString()
+  const id = route.params.id
+    ? route.params.id.toString()
     : localStorage.getItem("orderId")
     ? localStorage.getItem("orderId")
     : null;
diff --git a/src/modules/13_salary/components/Command/step04.vue b/src/modules/13_salary/components/Command/step04.vue
index 366e4ba26..3c213a5f3 100644
--- a/src/modules/13_salary/components/Command/step04.vue
+++ b/src/modules/13_salary/components/Command/step04.vue
@@ -49,7 +49,6 @@ const dataGen = ref<any>();
 
 const orderId = ref<string>(orderId_params.toString());
 
-
 // เช็คว่าต้องมีแนบท้ายไหม code ที่เพิ่มคืออันที่ไม่มีแนบท้าย
 const attachmentStatus = computed(() => {
   return code.value != "c-pm-10" &&
@@ -102,6 +101,9 @@ const getCommandDetail = async () => {
     })
     .catch((e) => {
       messageError($q, e);
+    })
+    .finally(() => {
+      hideLoader();
     });
 };
 // โหลดคำสั่ง
@@ -138,7 +140,6 @@ const downloadCover = async (type: string) => {
   }
 };
 
-
 // เรียกไฟล์ คำสั่ง
 const fetchReportCover = async (type: string, orderId: string) => {
   await http
@@ -475,442 +476,66 @@ onMounted(async () => {
 </script>
 
 <template>
-    <div style="min-height: 70vh">
-      <q-splitter
-        v-model="splitterModel"
-        style="height: 70vh"
-        @update:model-value="onchangePage"
-      >
-        <template v-slot:before>
-          <div class="space">
-            <div @click="setTab('main')" :class="getClass(tab == 'main')">
-              <div class="q-pr-sm">คำสั่ง</div>
-              <q-btn
-                v-if="orderStatusName != 'ออกคำสั่งแล้ว'"
-                size="12px"
-                flat
-                dense
-                icon="mdi-download"
-                :disable="tab !== 'main'"
-                :color="tab !== 'main' ? 'grey' : 'add'"
-              >
-                <q-tooltip>ดาวน์โหลด</q-tooltip>
-                <q-menu>
-                  <q-list style="min-width: 150px">
-                    <q-item
-                      clickable
-                      v-close-popup
-                      @click="downloadCover('pdf')"
-                    >
-                      <!-- type="a"
+  <div style="min-height: 70vh">
+    <q-splitter
+      v-model="splitterModel"
+      style="height: 70vh"
+      @update:model-value="onchangePage"
+    >
+      <template v-slot:before>
+        <div class="space">
+          <div @click="setTab('main')" :class="getClass(tab == 'main')">
+            <div class="q-pr-sm">คำสั่ง</div>
+            <q-btn
+              v-if="orderStatusName != 'ออกคำสั่งแล้ว'"
+              size="12px"
+              flat
+              dense
+              icon="mdi-download"
+              :disable="tab !== 'main'"
+              :color="tab !== 'main' ? 'grey' : 'add'"
+            >
+              <q-tooltip>ดาวน์โหลด</q-tooltip>
+              <q-menu>
+                <q-list style="min-width: 150px">
+                  <q-item clickable v-close-popup @click="downloadCover('pdf')">
+                    <!-- type="a"
                       :href="orderCoverPdf"
                       target="_blank" -->
-                      <q-item-section avatar
-                        ><q-icon color="red" name="mdi-file-pdf"
-                      /></q-item-section>
-                      <q-item-section>ไฟล์ .PDF</q-item-section>
-                    </q-item>
-                    <q-item
-                      clickable
-                      v-close-popup
-                      @click="downloadCover('docx')"
-                    >
-                      <!-- type="a"
+                    <q-item-section avatar
+                      ><q-icon color="red" name="mdi-file-pdf"
+                    /></q-item-section>
+                    <q-item-section>ไฟล์ .PDF</q-item-section>
+                  </q-item>
+                  <q-item
+                    clickable
+                    v-close-popup
+                    @click="downloadCover('docx')"
+                  >
+                    <!-- type="a"
                       :href="orderCoverDocs"
                       target="_blank" -->
-                      <q-item-section avatar
-                        ><q-icon color="blue" name="mdi-file-word"
-                      /></q-item-section>
-                      <q-item-section>ไฟล์ .docx</q-item-section>
-                    </q-item>
-                  </q-list>
-                </q-menu>
-              </q-btn>
-            </div>
-            <q-space />
-            <q-btn
-              class="text-dark"
-              flat
-              dense
-              icon="mdi-fullscreen"
-              color="add"
-              @click="dialog = true"
-            />
+                    <q-item-section avatar
+                      ><q-icon color="blue" name="mdi-file-word"
+                    /></q-item-section>
+                    <q-item-section>ไฟล์ .docx</q-item-section>
+                  </q-item>
+                </q-list>
+              </q-menu>
+            </q-btn>
           </div>
-          <q-separator style="margin-top: -1px; z-index: 1" />
-          <q-card bordered class="card-pdf q-ma-md q-pa-md">
-            <div class="justify-between items-center align-center q-pb-sm row">
-              <q-btn
-                class="text-dark bg-grey-4"
-                flat
-                dense
-                @click="page = page > 1 ? page - 1 : page"
-              >
-                <q-icon name="mdi-chevron-left" />
-              </q-btn>
-
-              <span class="body-2 grey--text">
-                หน้าที่ {{ page }} จาก {{ numOfPages }}
-              </span>
-
-              <q-btn
-                class="text-dark bg-grey-4"
-                flat
-                dense
-                @click="page = page < numOfPages ? page + 1 : page"
-              >
-                <q-icon name="mdi-chevron-right" />
-              </q-btn>
-            </div>
-            <div class="pdfWidth">
-              <VuePDF ref="vuePDFRef" :pdf="pdfSrc" :page="page" fit-parent />
-              <!-- <VuePdf :key="page" :src="pdfSrc" :page="page" /> -->
-            </div>
-            <div class="justify-between items-center align-center q-pt-sm row">
-              <q-btn
-                class="text-dark bg-grey-4"
-                flat
-                dense
-                @click="page = page > 1 ? page - 1 : page"
-              >
-                <q-icon name="mdi-chevron-left" />
-              </q-btn>
-
-              <span class="body-2 grey--text">
-                หน้าที่ {{ page }} จาก {{ numOfPages }}
-              </span>
-
-              <q-btn
-                class="text-dark bg-grey-4"
-                flat
-                dense
-                @click="page = page < numOfPages ? page + 1 : page"
-              >
-                <q-icon name="mdi-chevron-right" />
-              </q-btn>
-            </div>
-          </q-card>
-        </template>
-
-        <template v-slot:separator>
-          <q-avatar
-            color="primary"
-            text-color="white"
-            size="30px"
-            icon="drag_indicator"
-          />
-        </template>
-
-        <template v-slot:after>
-          <div class="q-pa-md q-gutter-y-md">
-            <q-form ref="myFormUpload">
-              <fieldset class="border q-px-lg q-py-sm">
-                <legend class="text-header q-px-sm">อัปโหลดไฟล์</legend>
-                <div class="q-gutter-y-md q-mb-md">
-                  <div>
-                    <label class="text-file">คำสั่ง</label>
-                    <div v-if="OrderPDFUpload != ''" class="text-right">
-                      <q-btn
-                        size="12px"
-                        flat
-                        dense
-                        color="primary"
-                        icon="mdi-eye"
-                        @click="viewFileUpload(OrderPDFUpload)"
-                      >
-                        <q-tooltip>ดูไฟล์คำสั่ง</q-tooltip>
-                      </q-btn>
-                      <q-btn
-                        type="a"
-                        :href="OrderPDFUpload"
-                        size="12px"
-                        flat
-                        dense
-                        color="red"
-                        icon="mdi-download"
-                        target="_blank"
-                      >
-                        <q-tooltip>ดาวน์โหลดไฟล์คำสั่ง</q-tooltip>
-                      </q-btn>
-                    </div>
-                    <q-file
-                      v-if="orderStatusName != 'ออกคำสั่งแล้ว'"
-                      outlined
-                      dense
-                      v-model="fileOrder"
-                      label="เลือกไฟล์คำสั่ง"
-                      hide-bottom-space
-                      :rules="[(val) => val || 'กรุณาเลือกไฟล์ไฟล์คำสั่ง']"
-                      accept=".pdf"
-                    >
-                      <template v-slot:prepend>
-                        <q-icon name="attach_file" />
-                      </template>
-                    </q-file>
-                  </div>
-                  <div v-if="attachmentStatus">
-                    <label class="text-file">เอกสารแนบท้าย</label>
-                    <div v-if="TailerPDFUpload != ''" class="text-right">
-                      <q-btn
-                        size="12px"
-                        flat
-                        dense
-                        color="primary"
-                        icon="mdi-eye"
-                        @click="viewFileUpload(TailerPDFUpload)"
-                      >
-                        <q-tooltip>ดูเอกสารแนบท้าย</q-tooltip>
-                      </q-btn>
-                      <q-btn
-                        type="a"
-                        :href="TailerPDFUpload"
-                        size="12px"
-                        flat
-                        dense
-                        color="red"
-                        icon="mdi-download"
-                        target="_blank"
-                      >
-                        <q-tooltip>ดาวน์โหลดเอกสารแนบท้าย</q-tooltip>
-                      </q-btn>
-                    </div>
-
-                    <q-file
-                      v-if="orderStatusName != 'ออกคำสั่งแล้ว'"
-                      outlined
-                      dense
-                      v-model="fileTailer"
-                      label="เลือกไฟล์เอกสารแนบท้าย"
-                      hide-bottom-space
-                      :rules="[(val) => val || 'กรุณาเลือกไฟล์เอกสารแนบท้าย']"
-                      accept=".pdf"
-                    >
-                      <template v-slot:prepend>
-                        <q-icon name="attach_file" />
-                      </template>
-                    </q-file>
-                  </div>
-
-                  <!-- บันทึกอัพโหลดเอกสาร  -->
-                  <div
-                    v-if="orderStatusName != 'ออกคำสั่งแล้ว'"
-                    class="row col-12 q-mt-md"
-                  >
-                    <q-space></q-space>
-                    <q-btn
-                      unelevated
-                      label="บันทึก"
-                      :color="
-                        validateFormUpload() &&
-                        orderStatusName != 'ออกคำสั่งแล้ว'
-                          ? 'public'
-                          : 'grey'
-                      "
-                      :disable="
-                        !validateFormUpload() ||
-                        orderStatusName == 'ออกคำสั่งแล้ว'
-                      "
-                      @click="saveUpload"
-                    >
-                    </q-btn>
-                  </div>
-                </div>
-              </fieldset>
-            </q-form>
-
-            <q-form ref="myForm">
-              <fieldset class="border q-px-lg q-py-sm">
-                <legend class="text-header q-px-sm">รายละเอียด</legend>
-                <div class="q-gutter-y-md q-mb-md">
-                  <div>
-                    <label class="text-file">เลขที่คำสั่ง</label>
-                    <q-input
-                      :outlined="true"
-                      dense
-                      :readonly="!true"
-                      :borderless="!true"
-                      v-model="order"
-                      :rules="[(val) => !!val || `${'กรุณากรอกเลขที่คำสั่ง'}`]"
-                      hide-bottom-space
-                      :label="`${'เลขที่คำสั่ง'}`"
-                      :disable="orderStatusName == 'ออกคำสั่งแล้ว'"
-                    />
-                  </div>
-                  <div>
-                    <label class="text-file">ปีที่ออกคำสั่ง</label>
-                    <datepicker
-                      :disabled="orderStatusName == 'ออกคำสั่งแล้ว'"
-                      menu-class-name="modalfix"
-                      v-model="years"
-                      :locale="'th'"
-                      autoApply
-                      year-picker
-                      :enableTimePicker="false"
-                      week-start="0"
-                    >
-                      <template #year="{ year }">{{ year + 543 }}</template>
-                      <template #year-overlay-value="{ value }">{{
-                        parseInt(value + 543)
-                      }}</template>
-                      <template #trigger>
-                        <q-input
-                          :disable="orderStatusName == 'ออกคำสั่งแล้ว'"
-                          outlined
-                          dense
-                          :model-value="years + 543"
-                          :rules="[
-                            (val) => !!val || `${'กรุณาเลือกปีที่ออกคำสั่ง'}`,
-                          ]"
-                          hide-bottom-space
-                          :label="`${'ปีที่ออกคำสั่ง'}`"
-                        >
-                          <template v-slot:prepend>
-                            <q-icon
-                              name="event"
-                              class="cursor-pointer"
-                              style="color: var(--q-grey)"
-                            >
-                            </q-icon>
-                          </template>
-                        </q-input>
-                      </template>
-                    </datepicker>
-                  </div>
-                  <div>
-                    <label class="text-file">วันที่ลงนาม</label>
-                    <datepicker
-                      :disabled="orderStatusName == 'ออกคำสั่งแล้ว'"
-                      menu-class-name="modalfix"
-                      v-model="date"
-                      :locale="'th'"
-                      autoApply
-                      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
-                          :disable="orderStatusName == 'ออกคำสั่งแล้ว'"
-                          outlined
-                          dense
-                          class="full-width datepicker"
-                          hide-bottom-space
-                          :model-value="date != null ? date2Thai(date) : null"
-                          :label="`${'วันที่ลงนาม'}`"
-                          :rules="[
-                            (val) => !!val || `${'กรุณาเลือกวันที่ลงนาม'}`,
-                          ]"
-                        >
-                          <template v-slot:prepend>
-                            <q-icon
-                              name="event"
-                              class="cursor-pointer"
-                              style="color: var(--q-grey)"
-                            >
-                            </q-icon>
-                          </template>
-                        </q-input>
-                      </template>
-                    </datepicker>
-                  </div>
-
-                  <!-- บันทึกรายละเอียดคำสั่ง  -->
-                  <div
-                    v-if="orderStatusName != 'ออกคำสั่งแล้ว'"
-                    class="row col-12 q-mt-md"
-                  >
-                    <q-space></q-space>
-                    <q-btn
-                      unelevated
-                      label="บันทึก"
-                      :color="
-                        validateForm() && orderStatusName != 'ออกคำสั่งแล้ว'
-                          ? 'public'
-                          : 'grey'
-                      "
-                      :disable="
-                        !validateForm() || orderStatusName == 'ออกคำสั่งแล้ว'
-                      "
-                      @click="saveDetail"
-                    >
-                    </q-btn>
-                  </div>
-                </div>
-              </fieldset>
-            </q-form>
-          </div>
-        </template>
-      </q-splitter>
-    </div>
-    <q-separator />
-    <div class="flex justify-end q-pa-sm q-gutter-sm">
-      <q-btn
-        v-if="orderStatusName !== 'ออกคำสั่งแล้ว'"
-        dense
-        outline
-        color="primary"
-        icon="chevron_left"
-        @click="previous"
-        class="q-pr-md"
-        label="เลือกรายชื่อส่งสำเนา"
-      >
-      </q-btn>
-
-      <!-- ออกคำสั่ง -->
-      <q-btn
-        v-if="orderStatusName !== 'ออกคำสั่งแล้ว'"
-        :disable="statusOrder == 'N'"
-        unelevated
-        label="ออกคำสั่ง"
-        :color="statusOrder == 'Y' ? 'public' : 'grey'"
-      >
-        <q-menu>
-          <q-list style="min-width: 150px">
-            <q-item clickable v-close-popup @click="clickExecute(orderId)">
-              <q-item-section>ออกคำสั่งทันที</q-item-section>
-            </q-item>
-            <q-item clickable v-close-popup disabled>
-              <q-item-section>ส่งไปลงนาม</q-item-section>
-            </q-item>
-          </q-list>
-        </q-menu>
-      </q-btn>
-
-      <q-btn
-        v-else
-        disable
-        unelevated
-        label="ออกคำสั่งเสร็จสิ้น"
-        color="green"
-      ></q-btn>
-    </div>
-
-    <q-dialog
-      v-model="dialog"
-      persistent
-      :maximized="true"
-      transition-show="slide-up"
-      transition-hide="slide-down"
-    >
-      <q-card class="bg-white text-white">
-        <div class="flex justify-end items-center align-center q-mr-md q-mt-sm">
+          <q-space />
           <q-btn
-            icon="close"
-            unelevated
-            round
+            class="text-dark"
+            flat
             dense
-            style="color: #ff8080; background-color: #ffdede"
-            size="12px"
-            v-close-popup
+            icon="mdi-fullscreen"
+            color="add"
+            @click="dialog = true"
           />
         </div>
-        <q-card-section bordered class="card-pdf q-ma-md q-pa-md">
+        <q-separator style="margin-top: -1px; z-index: 1" />
+        <q-card bordered class="card-pdf q-ma-md q-pa-md">
           <div class="justify-between items-center align-center q-pb-sm row">
             <q-btn
               class="text-dark bg-grey-4"
@@ -921,7 +546,7 @@ onMounted(async () => {
               <q-icon name="mdi-chevron-left" />
             </q-btn>
 
-            <span class="body-2 grey--text text-black">
+            <span class="body-2 grey--text">
               หน้าที่ {{ page }} จาก {{ numOfPages }}
             </span>
 
@@ -935,13 +560,7 @@ onMounted(async () => {
             </q-btn>
           </div>
           <div class="pdfWidth">
-            <VuePDF
-              ref="vuePDFRef"
-              :pdf="pdfSrc"
-              :page="page"
-              fit-parent
-              :scale="0.1"
-            />
+            <VuePDF ref="vuePDFRef" :pdf="pdfSrc" :page="page" fit-parent />
             <!-- <VuePdf :key="page" :src="pdfSrc" :page="page" /> -->
           </div>
           <div class="justify-between items-center align-center q-pt-sm row">
@@ -954,7 +573,7 @@ onMounted(async () => {
               <q-icon name="mdi-chevron-left" />
             </q-btn>
 
-            <span class="body-2 grey--text text-black">
+            <span class="body-2 grey--text">
               หน้าที่ {{ page }} จาก {{ numOfPages }}
             </span>
 
@@ -967,89 +586,466 @@ onMounted(async () => {
               <q-icon name="mdi-chevron-right" />
             </q-btn>
           </div>
-        </q-card-section>
-      </q-card>
-    </q-dialog>
+        </q-card>
+      </template>
 
-    <q-dialog
-      v-model="dialogFileUpload"
-      persistent
-      :maximized="true"
-      transition-show="slide-up"
-      transition-hide="slide-down"
-    >
-      <q-card class="bg-white text-white">
-        <div class="flex justify-end items-center align-center q-mr-md q-mt-sm">
-          <q-btn
-            icon="close"
-            unelevated
-            round
-            dense
-            style="color: #ff8080; background-color: #ffdede"
-            size="12px"
-            v-close-popup
-          />
+      <template v-slot:separator>
+        <q-avatar
+          color="primary"
+          text-color="white"
+          size="30px"
+          icon="drag_indicator"
+        />
+      </template>
+
+      <template v-slot:after>
+        <div class="q-pa-md q-gutter-y-md">
+          <q-form ref="myFormUpload">
+            <fieldset class="border q-px-lg q-py-sm">
+              <legend class="text-header q-px-sm">อัปโหลดไฟล์</legend>
+              <div class="q-gutter-y-md q-mb-md">
+                <div>
+                  <label class="text-file">คำสั่ง</label>
+                  <div v-if="OrderPDFUpload != ''" class="text-right">
+                    <q-btn
+                      size="12px"
+                      flat
+                      dense
+                      color="primary"
+                      icon="mdi-eye"
+                      @click="viewFileUpload(OrderPDFUpload)"
+                    >
+                      <q-tooltip>ดูไฟล์คำสั่ง</q-tooltip>
+                    </q-btn>
+                    <q-btn
+                      type="a"
+                      :href="OrderPDFUpload"
+                      size="12px"
+                      flat
+                      dense
+                      color="red"
+                      icon="mdi-download"
+                      target="_blank"
+                    >
+                      <q-tooltip>ดาวน์โหลดไฟล์คำสั่ง</q-tooltip>
+                    </q-btn>
+                  </div>
+                  <q-file
+                    v-if="orderStatusName != 'ออกคำสั่งแล้ว'"
+                    outlined
+                    dense
+                    v-model="fileOrder"
+                    label="เลือกไฟล์คำสั่ง"
+                    hide-bottom-space
+                    :rules="[(val) => val || 'กรุณาเลือกไฟล์ไฟล์คำสั่ง']"
+                    accept=".pdf"
+                  >
+                    <template v-slot:prepend>
+                      <q-icon name="attach_file" />
+                    </template>
+                  </q-file>
+                </div>
+                <div v-if="attachmentStatus">
+                  <label class="text-file">เอกสารแนบท้าย</label>
+                  <div v-if="TailerPDFUpload != ''" class="text-right">
+                    <q-btn
+                      size="12px"
+                      flat
+                      dense
+                      color="primary"
+                      icon="mdi-eye"
+                      @click="viewFileUpload(TailerPDFUpload)"
+                    >
+                      <q-tooltip>ดูเอกสารแนบท้าย</q-tooltip>
+                    </q-btn>
+                    <q-btn
+                      type="a"
+                      :href="TailerPDFUpload"
+                      size="12px"
+                      flat
+                      dense
+                      color="red"
+                      icon="mdi-download"
+                      target="_blank"
+                    >
+                      <q-tooltip>ดาวน์โหลดเอกสารแนบท้าย</q-tooltip>
+                    </q-btn>
+                  </div>
+
+                  <q-file
+                    v-if="orderStatusName != 'ออกคำสั่งแล้ว'"
+                    outlined
+                    dense
+                    v-model="fileTailer"
+                    label="เลือกไฟล์เอกสารแนบท้าย"
+                    hide-bottom-space
+                    :rules="[(val) => val || 'กรุณาเลือกไฟล์เอกสารแนบท้าย']"
+                    accept=".pdf"
+                  >
+                    <template v-slot:prepend>
+                      <q-icon name="attach_file" />
+                    </template>
+                  </q-file>
+                </div>
+
+                <!-- บันทึกอัพโหลดเอกสาร  -->
+                <div
+                  v-if="orderStatusName != 'ออกคำสั่งแล้ว'"
+                  class="row col-12 q-mt-md"
+                >
+                  <q-space></q-space>
+                  <q-btn
+                    unelevated
+                    label="บันทึก"
+                    :color="
+                      validateFormUpload() && orderStatusName != 'ออกคำสั่งแล้ว'
+                        ? 'public'
+                        : 'grey'
+                    "
+                    :disable="
+                      !validateFormUpload() ||
+                      orderStatusName == 'ออกคำสั่งแล้ว'
+                    "
+                    @click="saveUpload"
+                  >
+                  </q-btn>
+                </div>
+              </div>
+            </fieldset>
+          </q-form>
+
+          <q-form ref="myForm">
+            <fieldset class="border q-px-lg q-py-sm">
+              <legend class="text-header q-px-sm">รายละเอียด</legend>
+              <div class="q-gutter-y-md q-mb-md">
+                <div>
+                  <label class="text-file">เลขที่คำสั่ง</label>
+                  <q-input
+                    :outlined="true"
+                    dense
+                    :readonly="!true"
+                    :borderless="!true"
+                    v-model="order"
+                    :rules="[(val) => !!val || `${'กรุณากรอกเลขที่คำสั่ง'}`]"
+                    hide-bottom-space
+                    :label="`${'เลขที่คำสั่ง'}`"
+                    :disable="orderStatusName == 'ออกคำสั่งแล้ว'"
+                  />
+                </div>
+                <div>
+                  <label class="text-file">ปีที่ออกคำสั่ง</label>
+                  <datepicker
+                    :disabled="orderStatusName == 'ออกคำสั่งแล้ว'"
+                    menu-class-name="modalfix"
+                    v-model="years"
+                    :locale="'th'"
+                    autoApply
+                    year-picker
+                    :enableTimePicker="false"
+                    week-start="0"
+                  >
+                    <template #year="{ year }">{{ year + 543 }}</template>
+                    <template #year-overlay-value="{ value }">{{
+                      parseInt(value + 543)
+                    }}</template>
+                    <template #trigger>
+                      <q-input
+                        :disable="orderStatusName == 'ออกคำสั่งแล้ว'"
+                        outlined
+                        dense
+                        :model-value="years + 543"
+                        :rules="[
+                          (val) => !!val || `${'กรุณาเลือกปีที่ออกคำสั่ง'}`,
+                        ]"
+                        hide-bottom-space
+                        :label="`${'ปีที่ออกคำสั่ง'}`"
+                      >
+                        <template v-slot:prepend>
+                          <q-icon
+                            name="event"
+                            class="cursor-pointer"
+                            style="color: var(--q-grey)"
+                          >
+                          </q-icon>
+                        </template>
+                      </q-input>
+                    </template>
+                  </datepicker>
+                </div>
+                <div>
+                  <label class="text-file">วันที่ลงนาม</label>
+                  <datepicker
+                    :disabled="orderStatusName == 'ออกคำสั่งแล้ว'"
+                    menu-class-name="modalfix"
+                    v-model="date"
+                    :locale="'th'"
+                    autoApply
+                    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
+                        :disable="orderStatusName == 'ออกคำสั่งแล้ว'"
+                        outlined
+                        dense
+                        class="full-width datepicker"
+                        hide-bottom-space
+                        :model-value="date != null ? date2Thai(date) : null"
+                        :label="`${'วันที่ลงนาม'}`"
+                        :rules="[
+                          (val) => !!val || `${'กรุณาเลือกวันที่ลงนาม'}`,
+                        ]"
+                      >
+                        <template v-slot:prepend>
+                          <q-icon
+                            name="event"
+                            class="cursor-pointer"
+                            style="color: var(--q-grey)"
+                          >
+                          </q-icon>
+                        </template>
+                      </q-input>
+                    </template>
+                  </datepicker>
+                </div>
+
+                <!-- บันทึกรายละเอียดคำสั่ง  -->
+                <div
+                  v-if="orderStatusName != 'ออกคำสั่งแล้ว'"
+                  class="row col-12 q-mt-md"
+                >
+                  <q-space></q-space>
+                  <q-btn
+                    unelevated
+                    label="บันทึก"
+                    :color="
+                      validateForm() && orderStatusName != 'ออกคำสั่งแล้ว'
+                        ? 'public'
+                        : 'grey'
+                    "
+                    :disable="
+                      !validateForm() || orderStatusName == 'ออกคำสั่งแล้ว'
+                    "
+                    @click="saveDetail"
+                  >
+                  </q-btn>
+                </div>
+              </div>
+            </fieldset>
+          </q-form>
         </div>
-        <q-card-section bordered class="card-pdf q-ma-md q-pa-md">
-          <div class="justify-between items-center align-center q-pb-sm row">
-            <q-btn
-              class="text-dark bg-grey-4"
-              flat
-              dense
-              @click="page = page > 1 ? page - 1 : page"
-            >
-              <q-icon name="mdi-chevron-left" />
-            </q-btn>
+      </template>
+    </q-splitter>
+  </div>
+  <q-separator />
+  <div class="flex justify-end q-pa-sm q-gutter-sm">
+    <q-btn
+      v-if="orderStatusName !== 'ออกคำสั่งแล้ว'"
+      dense
+      outline
+      color="primary"
+      icon="chevron_left"
+      @click="previous"
+      class="q-pr-md"
+      label="เลือกรายชื่อส่งสำเนา"
+    >
+    </q-btn>
 
-            <span class="body-2 grey--text text-black">
-              หน้าที่ {{ page }} จาก {{ numOfPages }}
-            </span>
+    <!-- ออกคำสั่ง -->
+    <q-btn
+      v-if="orderStatusName !== 'ออกคำสั่งแล้ว'"
+      :disable="statusOrder == 'N'"
+      unelevated
+      label="ออกคำสั่ง"
+      :color="statusOrder == 'Y' ? 'public' : 'grey'"
+    >
+      <q-menu>
+        <q-list style="min-width: 150px">
+          <q-item clickable v-close-popup @click="clickExecute(orderId)">
+            <q-item-section>ออกคำสั่งทันที</q-item-section>
+          </q-item>
+          <q-item clickable v-close-popup disabled>
+            <q-item-section>ส่งไปลงนาม</q-item-section>
+          </q-item>
+        </q-list>
+      </q-menu>
+    </q-btn>
 
-            <q-btn
-              class="text-dark bg-grey-4"
-              flat
-              dense
-              @click="page = page < numOfPages ? page + 1 : page"
-            >
-              <q-icon name="mdi-chevron-right" />
-            </q-btn>
-          </div>
-          <div class="pdfWidth">
-            <VuePDF
-              ref="vuePDFRef"
-              :pdf="pdfFileUploadSrc"
-              :page="page"
-              fit-parent
-              :scale="0.1"
-            />
-            <!-- <VuePdf :key="page" :src="pdfSrc" :page="page" /> -->
-          </div>
-          <div class="justify-between items-center align-center q-pt-sm row">
-            <q-btn
-              class="text-dark bg-grey-4"
-              flat
-              dense
-              @click="page = page > 1 ? page - 1 : page"
-            >
-              <q-icon name="mdi-chevron-left" />
-            </q-btn>
+    <q-btn
+      v-else
+      disable
+      unelevated
+      label="ออกคำสั่งเสร็จสิ้น"
+      color="green"
+    ></q-btn>
+  </div>
 
-            <span class="body-2 grey--text text-black">
-              หน้าที่ {{ page }} จาก {{ numOfPages }}
-            </span>
+  <q-dialog
+    v-model="dialog"
+    persistent
+    :maximized="true"
+    transition-show="slide-up"
+    transition-hide="slide-down"
+  >
+    <q-card class="bg-white text-white">
+      <div class="flex justify-end items-center align-center q-mr-md q-mt-sm">
+        <q-btn
+          icon="close"
+          unelevated
+          round
+          dense
+          style="color: #ff8080; background-color: #ffdede"
+          size="12px"
+          v-close-popup
+        />
+      </div>
+      <q-card-section bordered class="card-pdf q-ma-md q-pa-md">
+        <div class="justify-between items-center align-center q-pb-sm row">
+          <q-btn
+            class="text-dark bg-grey-4"
+            flat
+            dense
+            @click="page = page > 1 ? page - 1 : page"
+          >
+            <q-icon name="mdi-chevron-left" />
+          </q-btn>
 
-            <q-btn
-              class="text-dark bg-grey-4"
-              flat
-              dense
-              @click="page = page < numOfPages ? page + 1 : page"
-            >
-              <q-icon name="mdi-chevron-right" />
-            </q-btn>
-          </div>
-        </q-card-section>
-      </q-card>
-    </q-dialog>
+          <span class="body-2 grey--text text-black">
+            หน้าที่ {{ page }} จาก {{ numOfPages }}
+          </span>
+
+          <q-btn
+            class="text-dark bg-grey-4"
+            flat
+            dense
+            @click="page = page < numOfPages ? page + 1 : page"
+          >
+            <q-icon name="mdi-chevron-right" />
+          </q-btn>
+        </div>
+        <div class="pdfWidth">
+          <VuePDF
+            ref="vuePDFRef"
+            :pdf="pdfSrc"
+            :page="page"
+            fit-parent
+            :scale="0.1"
+          />
+          <!-- <VuePdf :key="page" :src="pdfSrc" :page="page" /> -->
+        </div>
+        <div class="justify-between items-center align-center q-pt-sm row">
+          <q-btn
+            class="text-dark bg-grey-4"
+            flat
+            dense
+            @click="page = page > 1 ? page - 1 : page"
+          >
+            <q-icon name="mdi-chevron-left" />
+          </q-btn>
+
+          <span class="body-2 grey--text text-black">
+            หน้าที่ {{ page }} จาก {{ numOfPages }}
+          </span>
+
+          <q-btn
+            class="text-dark bg-grey-4"
+            flat
+            dense
+            @click="page = page < numOfPages ? page + 1 : page"
+          >
+            <q-icon name="mdi-chevron-right" />
+          </q-btn>
+        </div>
+      </q-card-section>
+    </q-card>
+  </q-dialog>
+
+  <q-dialog
+    v-model="dialogFileUpload"
+    persistent
+    :maximized="true"
+    transition-show="slide-up"
+    transition-hide="slide-down"
+  >
+    <q-card class="bg-white text-white">
+      <div class="flex justify-end items-center align-center q-mr-md q-mt-sm">
+        <q-btn
+          icon="close"
+          unelevated
+          round
+          dense
+          style="color: #ff8080; background-color: #ffdede"
+          size="12px"
+          v-close-popup
+        />
+      </div>
+      <q-card-section bordered class="card-pdf q-ma-md q-pa-md">
+        <div class="justify-between items-center align-center q-pb-sm row">
+          <q-btn
+            class="text-dark bg-grey-4"
+            flat
+            dense
+            @click="page = page > 1 ? page - 1 : page"
+          >
+            <q-icon name="mdi-chevron-left" />
+          </q-btn>
+
+          <span class="body-2 grey--text text-black">
+            หน้าที่ {{ page }} จาก {{ numOfPages }}
+          </span>
+
+          <q-btn
+            class="text-dark bg-grey-4"
+            flat
+            dense
+            @click="page = page < numOfPages ? page + 1 : page"
+          >
+            <q-icon name="mdi-chevron-right" />
+          </q-btn>
+        </div>
+        <div class="pdfWidth">
+          <VuePDF
+            ref="vuePDFRef"
+            :pdf="pdfFileUploadSrc"
+            :page="page"
+            fit-parent
+            :scale="0.1"
+          />
+          <!-- <VuePdf :key="page" :src="pdfSrc" :page="page" /> -->
+        </div>
+        <div class="justify-between items-center align-center q-pt-sm row">
+          <q-btn
+            class="text-dark bg-grey-4"
+            flat
+            dense
+            @click="page = page > 1 ? page - 1 : page"
+          >
+            <q-icon name="mdi-chevron-left" />
+          </q-btn>
+
+          <span class="body-2 grey--text text-black">
+            หน้าที่ {{ page }} จาก {{ numOfPages }}
+          </span>
+
+          <q-btn
+            class="text-dark bg-grey-4"
+            flat
+            dense
+            @click="page = page < numOfPages ? page + 1 : page"
+          >
+            <q-icon name="mdi-chevron-right" />
+          </q-btn>
+        </div>
+      </q-card-section>
+    </q-card>
+  </q-dialog>
 </template>
 
 <style lang="scss" scoped>
diff --git a/src/modules/13_salary/views/commandSalary.vue b/src/modules/13_salary/views/commandSalary.vue
index 188e698c6..b6ea057c9 100644
--- a/src/modules/13_salary/views/commandSalary.vue
+++ b/src/modules/13_salary/views/commandSalary.vue
@@ -18,7 +18,7 @@ import { useOrderStore } from "@/modules/11_discipline/store/OrderStore";
 import { useCounterMixin } from "@/stores/mixin";
 import { useOrderPlacementDataStore } from "@/modules/10_order/store";
 
-const rows = ref<any>([])
+const rows = ref<any>([]);
 const $q = useQuasar(); //ใช้ noti quasar
 const mixin = useCounterMixin();
 const DataStore = useOrderPlacementDataStore();
@@ -31,7 +31,13 @@ const pagination = ref({
   rowsPerPage: 10,
 });
 
-const commandCodes = ref<string[]>(["C-PM-33", "C-PM-34", "C-PM-35", "C-PM-36", "C-PM-37"]);
+const commandCodes = ref<string[]>([
+  "C-PM-33",
+  "C-PM-34",
+  "C-PM-35",
+  "C-PM-36",
+  "C-PM-37",
+]);
 
 /** ข้อมูลที่เเสดงใน คอลัม */
 const columns = ref<QTableProps["columns"]>([
@@ -153,6 +159,8 @@ async function fetchOrderlist() {
       );
 
       stroe.fetchOrder(filterListOrder);
+
+      rows.value = stroe.mainData;
     })
     .catch((e: any) => {
       messageError($q, e);
@@ -217,7 +225,7 @@ async function OrderTypeFilter() {
   await http
     .get(config.API.typeOrder())
     .then((res) => {
-      console.log(res)
+      console.log(res);
       const response = res.data.result;
       const filterRes = response.filter((e: any) =>
         commandCodes.value.includes(e.commandCode)
@@ -294,7 +302,7 @@ function filterSelector(val: any, update: Function, refData: string) {
   }
 }
 
-function redirectToPage(id:string,status:string){
+function redirectToPage(id: string, status: string) {
   let step = 1;
   switch (status) {
     case "จัดทำร่างคำสั่ง":
@@ -500,9 +508,7 @@ function redirectToPage(id:string,status:string){
                   v-for="col in props.cols"
                   :key="col.name"
                   :props="props"
-                  @click="
-                    redirectToPage(props.row.id, props.row.status)
-                  "
+                  @click="redirectToPage(props.row.orderId, props.row.status)"
                 >
                   <div v-if="col.name === 'no'">
                     {{ props.rowIndex + 1 }}