From a3ccc67bdd12c3ec5dab90f54c76cab3a0927933 Mon Sep 17 00:00:00 2001
From: waruneeta <warunee.auy@gmail.com>
Date: Fri, 11 Aug 2023 16:19:49 +0700
Subject: [PATCH] =?UTF-8?q?=E0=B9=81=E0=B8=81=E0=B9=89=E0=B9=84=E0=B8=82?=
 =?UTF-8?q?=20popup=20=E0=B9=81=E0=B8=A5=E0=B8=B0=20fix=20bug=20=E0=B8=AD?=
 =?UTF-8?q?=E0=B8=AD=E0=B8=81=E0=B8=84=E0=B8=B3=E0=B8=AA=E0=B8=B1=E0=B9=88?=
 =?UTF-8?q?=E0=B8=87?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/modules/10_order/components/Main.vue      |  27 +-
 .../10_order/components/step/step01.vue       | 328 ++++-------------
 .../10_order/components/step/step02.vue       | 344 ++++++------------
 .../10_order/components/step/step03.vue       |   2 +-
 .../10_order/components/step/step04.vue       |  59 ++-
 src/modules/10_order/router.ts                |  20 +-
 6 files changed, 242 insertions(+), 538 deletions(-)

diff --git a/src/modules/10_order/components/Main.vue b/src/modules/10_order/components/Main.vue
index f5ed2ae12..c6b61430d 100644
--- a/src/modules/10_order/components/Main.vue
+++ b/src/modules/10_order/components/Main.vue
@@ -125,7 +125,7 @@ import config from "@/app.config";
 
 const $q = useQuasar(); //ใช้ noti quasar
 const mixin = useCounterMixin();
-const { showLoader, hideLoader, messageError, date2Thai, dateText, success } =
+const { showLoader, hideLoader, messageError, date2Thai, dateText, success, dialogMessage } =
   mixin;
 const DataStore = useOrderPlacementDataStore();
 
@@ -314,20 +314,17 @@ const redirectToPage = (id?: string, status?: string) => {
 };
 
 const clickDelete = (id: string) => {
-  $q.dialog({
-    title: "ยืนยันการลบข้อมูล",
-    message: "ต้องการลบข้อมูลนี้ใช่หรือไม่?",
-    cancel: {
-      flat: true,
-      color: "negative",
-    },
-    persistent: true,
-  })
-    .onOk(async () => {
-      await deleteData(id);
-    })
-    .onCancel(() => { })
-    .onDismiss(() => { });
+  dialogMessage(
+    $q,
+    "ยืนยันการลบข้อมูล",
+    "ต้องการลบข้อมูลนี้ใช่หรือไม่?",
+    "mdi-delete",
+    "ตกลง",
+    "red",
+    () => deleteData(id),
+    undefined
+  );
+
 };
 
 const deleteData = async (id: string) => {
diff --git a/src/modules/10_order/components/step/step01.vue b/src/modules/10_order/components/step/step01.vue
index 4f63bc851..9ba307395 100644
--- a/src/modules/10_order/components/step/step01.vue
+++ b/src/modules/10_order/components/step/step01.vue
@@ -3,24 +3,10 @@
     <q-form ref="myForm" class="q-pa-md">
       <div class="row col-12 q-col-gutter-x-lg q-col-gutter-y-md">
         <div class="col-xs-12 col-md-6">
-          <selector
-            :class="getClass(true)"
-            outlined
-            dense
-            lazy-rules
-            v-model="typeOrder"
-            :rules="[(val: string) => !!val || `${'กรุณาเลือกประเภทคำสั่ง'}`]"
-            hide-bottom-space
-            :label="`${'ประเภทคำสั่ง'}`"
-            @update:modelValue="clickEditRow"
-            emit-value
-            map-options
-            option-label="name"
-            :options="typeOrderOption"
-            option-value="id"
-            use-input
-            input-debounce="0"
-          />
+          <selector :class="getClass(true)" outlined dense lazy-rules v-model="typeOrder"
+            :rules="[(val: string) => !!val || `${'กรุณาเลือกประเภทคำสั่ง'}`]" hide-bottom-space
+            :label="`${'ประเภทคำสั่ง'}`" @update:modelValue="clickEditRow" emit-value map-options option-label="name"
+            :options="typeOrderOption" option-value="id" use-input input-debounce="0" />
           <!-- @filter="(inputValue:string,
           doneFn:Function) => filterSelector(inputValue, doneFn,'typeOrderOption'
           ) " -->
@@ -29,73 +15,36 @@
         <div class="col-xs-12 col-md-6">
           <!-- :readonly="!edit"
                 :borderless="!edit" -->
-          <q-input
-            :class="getClass(true)"
-            outlined
-            dense
-            lazy-rules
-            v-model="nameOrder"
-            :rules="[(val) => !!val || `${'กรุณากรอกคำสั่งเรื่อง'}`]"
-            :label="`${'คำสั่งเรื่อง'}`"
-            @update:modelValue="clickEditRow"
-            hide-bottom-space
-          />
+          <q-input :class="getClass(true)" outlined dense lazy-rules v-model="nameOrder"
+            :rules="[(val) => !!val || `${'กรุณากรอกคำสั่งเรื่อง'}`]" :label="`${'คำสั่งเรื่อง'}`"
+            @update:modelValue="clickEditRow" hide-bottom-space />
         </div>
 
         <div class="row col-xs-7 col-md-3 q-col-gutter-x-xs">
           <div class="col-6">
-            <q-input
-              :class="getClass(true)"
-              outlined
-              dense
-              lazy-rules
-              v-model="command"
-              :rules="[(val) => !!val || `${'กรุณากรอกคำสั่ง'}`]"
-              :label="`${'คำสั่ง'}`"
-              @update:modelValue="clickEditRow"
-              hide-bottom-space
-              type="number"
-            />
+            <q-input :class="getClass(true)" outlined dense lazy-rules v-model="command"
+              :rules="[(val) => !!val || `${'กรุณากรอกคำสั่ง'}`]" :label="`${'คำสั่ง'}`" @update:modelValue="clickEditRow"
+              hide-bottom-space type="number" />
           </div>
-          <label class="col-1 flex justify-center items-center text-bold"
-            >/</label
-          >
+          <label class="col-1 flex justify-center items-center text-bold">/</label>
           <div class="col-5">
-            <datepicker
-              v-model="dateYear"
-              :locale="'th'"
-              autoApply
-              year-picker
-              :enableTimePicker="false"
-              @update:modelValue="clickEditRow"
-            >
+            <datepicker v-model="dateYear" :locale="'th'" autoApply year-picker :enableTimePicker="false"
+              @update:modelValue="clickEditRow">
               <template #year="{ year }">{{ year + 543 }}</template>
               <template #year-overlay-value="{ value }">{{
                 parseInt(value + 543)
               }}</template>
               <template #trigger>
-                <q-input
-                  :model-value="dateYear + 543"
-                  :rules="[(val) => !!val || `${'กรุณากรอก พ.ศ.'}`]"
-                  :label="`${'พ.ศ.'}`"
-                  dense
-                  outlined
-                >
+                <q-input :model-value="dateYear + 543" :rules="[(val) => !!val || `${'กรุณากรอก พ.ศ.'}`]"
+                  :label="`${'พ.ศ.'}`" dense outlined>
                 </q-input>
               </template>
             </datepicker>
           </div>
         </div>
         <div class="col-xs-5 col-md-3">
-          <datepicker
-            menu-class-name="modalfix"
-            v-model="dateCommand"
-            :locale="'th'"
-            autoApply
-            borderless
-            :enableTimePicker="false"
-            week-start="0"
-          >
+          <datepicker menu-class-name="modalfix" v-model="dateCommand" :locale="'th'" autoApply borderless
+            :enableTimePicker="false" week-start="0">
             <template #year="{ year }">
               {{ year + 543 }}
             </template>
@@ -103,24 +52,12 @@
               {{ parseInt(value + 543) }}
             </template>
             <template #trigger>
-              <q-input
-                outlined
-                dense
-                class="full-width datepicker"
-                :model-value="
-                  dateCommand != null ? date2Thai(dateCommand) : null
-                "
-                :label="`${'วันที่มีผลออกคำสั่ง'}`"
-                :rules="[
-                  (val) => !!val || `${'กรุณาเลือกวันที่มีผลออกคำสั่ง'}`,
-                ]"
-              >
+              <q-input outlined dense class="full-width datepicker" :model-value="dateCommand != null ? date2Thai(dateCommand) : null
+                " :label="`${'วันที่มีผลออกคำสั่ง'}`" :rules="[
+    (val) => !!val || `${'กรุณาเลือกวันที่มีผลออกคำสั่ง'}`,
+  ]">
                 <template v-slot:prepend>
-                  <q-icon
-                    name="event"
-                    class="cursor-pointer"
-                    style="color: var(--q-primary)"
-                  >
+                  <q-icon name="event" class="cursor-pointer" style="color: var(--q-primary)">
                   </q-icon>
                 </template>
               </q-input>
@@ -129,24 +66,10 @@
         </div>
 
         <div class="col-xs-12 col-md-6">
-          <selector
-            :class="getClass(true)"
-            outlined
-            dense
-            lazy-rules
-            v-model="byOrder"
-            :rules="[(val: string) => !!val || `${'กรุณาเลือกคำสั่งโดย'}`]"
-            hide-bottom-space
-            :label="`${'คำสั่งโดย'}`"
-            @update:modelValue="clickEditRow"
-            emit-value
-            map-options
-            option-label="name"
-            :options="byOrderOption"
-            option-value="id"
-            use-input
-            input-debounce="0"
-          />
+          <selector :class="getClass(true)" outlined dense lazy-rules v-model="byOrder"
+            :rules="[(val: string) => !!val || `${'กรุณาเลือกคำสั่งโดย'}`]" hide-bottom-space :label="`${'คำสั่งโดย'}`"
+            @update:modelValue="clickEditRow" emit-value map-options option-label="name" :options="byOrderOption"
+            option-value="id" use-input input-debounce="0" />
           <!-- @filter="(inputValue:string,
           doneFn:Function) => filterSelector(inputValue, doneFn,'byOrderOption'
           ) " -->
@@ -154,55 +77,25 @@
         <div class="col-xs-12 col-md-6">
           <!-- :readonly="!edit"
                 :borderless="!edit" -->
-          <q-input
-            :class="getClass(true)"
-            outlined
-            dense
-            lazy-rules
-            v-model="nameCommand"
-            :rules="[(val) => !!val || `${'กรุณากรอกผู้มีอำนาจลงนาม'}`]"
-            :label="`${'ผู้มีอำนาจลงนาม'}`"
-            @update:modelValue="clickEditRow"
-            hide-bottom-space
-          />
+          <q-input :class="getClass(true)" outlined dense lazy-rules v-model="nameCommand"
+            :rules="[(val) => !!val || `${'กรุณากรอกผู้มีอำนาจลงนาม'}`]" :label="`${'ผู้มีอำนาจลงนาม'}`"
+            @update:modelValue="clickEditRow" hide-bottom-space />
         </div>
         <div class="col-xs-12 col-md-6">
           <!-- :readonly="!edit"
                 :borderless="!edit" -->
-          <q-input
-            :class="getClass(true)"
-            outlined
-            dense
-            lazy-rules
-            v-model="positionCommand"
-            :rules="[(val) => !!val || `${'กรุณากรอกตำแหน่งผู้มีอำนาจลงนาม'}`]"
-            :label="`${'ตำแหน่งผู้มีอำนาจลงนาม'}`"
-            @update:modelValue="clickEditRow"
-            hide-bottom-space
-          />
+          <q-input :class="getClass(true)" outlined dense lazy-rules v-model="positionCommand"
+            :rules="[(val) => !!val || `${'กรุณากรอกตำแหน่งผู้มีอำนาจลงนาม'}`]" :label="`${'ตำแหน่งผู้มีอำนาจลงนาม'}`"
+            @update:modelValue="clickEditRow" hide-bottom-space />
         </div>
         <div class="col-12">
           <q-separator />
         </div>
         <div class="col-xs-12 col-md-6">
-          <selector
-            :class="getClass(true)"
-            outlined
-            dense
-            lazy-rules
-            v-model="examRound"
-            :rules="[(val: string) => !!val || `${'กรุณาเลือกรอบการสอบ'}`]"
-            hide-bottom-space
-            :label="`${'รอบการสอบ'}`"
-            @update:modelValue="clickEditRow"
-            emit-value
-            map-options
-            option-label="examRoundName"
-            :options="examRoundOption"
-            option-value="examRoundValue"
-            use-input
-            input-debounce="0"
-          />
+          <selector :class="getClass(true)" outlined dense lazy-rules v-model="examRound"
+            :rules="[(val: string) => !!val || `${'กรุณาเลือกรอบการสอบ'}`]" hide-bottom-space :label="`${'รอบการสอบ'}`"
+            @update:modelValue="clickEditRow" emit-value map-options option-label="examRoundName"
+            :options="examRoundOption" option-value="examRoundValue" use-input input-debounce="0" />
           <!-- @filter="(inputValue:string,
           doneFn:Function) => filterSelector(inputValue, doneFn,'testOption'
           ) " -->
@@ -216,39 +109,18 @@
           filterSelector(inputValue, doneFn,'positionOption' ) " -->
         </div>
         <div class="col-xs-12 col-md-6">
-          <selector
-            :class="getClass(true)"
-            outlined
-            dense
-            lazy-rules
-            v-model="register"
-            :rules="[(val: string) => !!val || `${'กรุณาเลือกมติ กก. ครั้งที่ (เรื่อง รับสมัครสอบฯ)'}`]"
-            hide-bottom-space
-            :label="`${'มติ กก. ครั้งที่ (เรื่อง รับสมัครสอบฯ)'}`"
-            @update:modelValue="clickEditRow"
-            emit-value
-            map-options
-            option-label="name"
-            :options="registerOption"
-            option-value="id"
-            use-input
-            input-debounce="0"
-          />
+          <selector :class="getClass(true)" outlined dense lazy-rules v-model="register"
+            :rules="[(val: string) => !!val || `${'กรุณาเลือกมติ กก. ครั้งที่ (เรื่อง รับสมัครสอบฯ)'}`]" hide-bottom-space
+            :label="`${'มติ กก. ครั้งที่ (เรื่อง รับสมัครสอบฯ)'}`" @update:modelValue="clickEditRow" emit-value
+            map-options option-label="name" :options="registerOption" option-value="id" use-input input-debounce="0" />
         </div>
         <!-- @filter="(inputValue:string,
         doneFn:Function) => filterSelector(inputValue, doneFn,'registerOption'
         ) " -->
 
         <div class="col-xs-12 col-md-6">
-          <datepicker
-            menu-class-name="modalfix"
-            v-model="dateRegister"
-            :locale="'th'"
-            autoApply
-            borderless
-            :enableTimePicker="false"
-            week-start="0"
-          >
+          <datepicker menu-class-name="modalfix" v-model="dateRegister" :locale="'th'" autoApply borderless
+            :enableTimePicker="false" week-start="0">
             <template #year="{ year }">
               {{ year + 543 }}
             </template>
@@ -256,25 +128,13 @@
               {{ parseInt(value + 543) }}
             </template>
             <template #trigger>
-              <q-input
-                outlined
-                dense
-                class="full-width datepicker"
-                :model-value="
-                  dateRegister != null ? date2Thai(dateRegister) : null
-                "
-                :label="`${'ลงวันที่ (เรื่อง รับสมัครสอบฯ)'}`"
-                :rules="[
-                  (val) =>
-                    !!val || `${'กรุณาเลือกลงวันที่ (เรื่อง รับสมัครสอบฯ)'}`,
-                ]"
-              >
+              <q-input outlined dense class="full-width datepicker" :model-value="dateRegister != null ? date2Thai(dateRegister) : null
+                " :label="`${'ลงวันที่ (เรื่อง รับสมัครสอบฯ)'}`" :rules="[
+    (val) =>
+      !!val || `${'กรุณาเลือกลงวันที่ (เรื่อง รับสมัครสอบฯ)'}`,
+  ]">
                 <template v-slot:prepend>
-                  <q-icon
-                    name="event"
-                    class="cursor-pointer"
-                    style="color: var(--q-primary)"
-                  >
+                  <q-icon name="event" class="cursor-pointer" style="color: var(--q-primary)">
                   </q-icon>
                 </template>
               </q-input>
@@ -282,38 +142,18 @@
           </datepicker>
         </div>
         <div class="col-xs-12 col-md-6">
-          <selector
-            :class="getClass(true)"
-            outlined
-            dense
-            lazy-rules
-            v-model="announce"
+          <selector :class="getClass(true)" outlined dense lazy-rules v-model="announce"
             :rules="[(val: string) => !!val || `${'กรุณาเลือกมติ กก. ครั้งที่ (เรื่อง ผลการสอบแข่งขัน)'}`]"
-            hide-bottom-space
-            :label="`${'มติ กก. ครั้งที่ (เรื่อง ผลการสอบแข่งขัน)'}`"
-            @update:modelValue="clickEditRow"
-            emit-value
-            map-options
-            option-label="name"
-            :options="announceOption"
-            option-value="id"
-            use-input
-            input-debounce="0"
-          />
+            hide-bottom-space :label="`${'มติ กก. ครั้งที่ (เรื่อง ผลการสอบแข่งขัน)'}`" @update:modelValue="clickEditRow"
+            emit-value map-options option-label="name" :options="announceOption" option-value="id" use-input
+            input-debounce="0" />
           <!-- @filter="(inputValue:string,
           doneFn:Function) => filterSelector(inputValue, doneFn,'announceOption'
           ) "  -->
         </div>
         <div class="col-xs-12 col-md-6">
-          <datepicker
-            menu-class-name="modalfix"
-            v-model="dateAnnounce"
-            :locale="'th'"
-            autoApply
-            borderless
-            :enableTimePicker="false"
-            week-start="0"
-          >
+          <datepicker menu-class-name="modalfix" v-model="dateAnnounce" :locale="'th'" autoApply borderless
+            :enableTimePicker="false" week-start="0">
             <template #year="{ year }">
               {{ year + 543 }}
             </template>
@@ -321,25 +161,13 @@
               {{ parseInt(value + 543) }}
             </template>
             <template #trigger>
-              <q-input
-                outlined
-                dense
-                class="full-width datepicker"
-                :model-value="
-                  dateAnnounce != null ? date2Thai(dateAnnounce) : null
-                "
-                :label="`${'ลงวันที่ (เรื่อง ผลการสอบแข่งขัน)'}`"
-                :rules="[
-                  (val) =>
-                    !!val || `${'กรุณาเลือกลงวันที่ (เรื่อง ผลการสอบแข่งขัน)'}`,
-                ]"
-              >
+              <q-input outlined dense class="full-width datepicker" :model-value="dateAnnounce != null ? date2Thai(dateAnnounce) : null
+                " :label="`${'ลงวันที่ (เรื่อง ผลการสอบแข่งขัน)'}`" :rules="[
+    (val) =>
+      !!val || `${'กรุณาเลือกลงวันที่ (เรื่อง ผลการสอบแข่งขัน)'}`,
+  ]">
                 <template v-slot:prepend>
-                  <q-icon
-                    name="event"
-                    class="cursor-pointer"
-                    style="color: var(--q-primary)"
-                  >
+                  <q-icon name="event" class="cursor-pointer" style="color: var(--q-primary)">
                   </q-icon>
                 </template>
               </q-input>
@@ -376,7 +204,7 @@ import http from "@/plugins/http";
 import config from "@/app.config";
 
 const mixin = useCounterMixin();
-const { date2Thai, messageError, showLoader, hideLoader, success } = mixin;
+const { date2Thai, messageError, showLoader, hideLoader, success, dialogMessage } = mixin;
 const $q = useQuasar(); //ใช้ noti quasar
 const route = useRoute();
 
@@ -570,7 +398,7 @@ const fecthExamRoundOption = async () => {
       examRoundOption.value = res.data.result;
       console.log(examRoundOption.value);
     })
-    .catch((e) => {});
+    .catch((e) => { });
 };
 const submit = async () => {
   const formdata = {
@@ -591,23 +419,23 @@ const submit = async () => {
   };
   await myForm.value!.validate().then((result: boolean) => {
     if (result) {
-      $q.dialog({
-        title: "ยืนยันการบันทึกข้อมูล",
-        message: "ต้องการบันทึกข้อมูลนี้ใช่หรือไม่?",
-        cancel: {
-          flat: true,
-          color: "negative",
+      dialogMessage(
+        $q,
+        "ยืนยันการบันทึกข้อมูล",
+        "ต้องการบันทึกข้อมูลนี้ใช่หรือไม่?",
+        "info",
+        "ตกลง",
+        "public",
+        () => {
+          if (!orderId) {
+            createListOrder(formdata);
+          } else {
+            let orderIdString = orderId.toString();
+            updateOrder(formdata, orderIdString);
+          }
         },
-        persistent: true,
-      }).onOk(async () => {
-        showLoader();
-        if (!orderId) {
-          createListOrder(formdata);
-        } else {
-          let orderIdString = orderId.toString();
-          updateOrder(formdata, orderIdString);
-        }
-      });
+        undefined
+      );
     }
   });
 };
diff --git a/src/modules/10_order/components/step/step02.vue b/src/modules/10_order/components/step/step02.vue
index a64b88f85..2c83f6be2 100644
--- a/src/modules/10_order/components/step/step02.vue
+++ b/src/modules/10_order/components/step/step02.vue
@@ -9,51 +9,20 @@ div
         <q-space />
         <div class="items-center" style="display: flex">
           <!-- ค้นหาข้อความใน table -->
-          <q-input
-            standout
-            dense
-            v-model="filter"
-            ref="filterRef"
-            outlined
-            debounce="300"
-            placeholder="ค้นหา"
-            style="max-width: 200px"
-            class="q-ml-sm"
-          >
+          <q-input standout dense v-model="filter" ref="filterRef" outlined debounce="300" placeholder="ค้นหา"
+            style="max-width: 200px" class="q-ml-sm">
             <template v-slot:append>
               <q-icon v-if="filter == ''" name="search" />
-              <q-icon
-                v-if="filter !== ''"
-                name="clear"
-                class="cursor-pointer"
-                @click="resetFilter"
-              />
+              <q-icon v-if="filter !== ''" name="clear" class="cursor-pointer" @click="resetFilter" />
             </template>
           </q-input>
           <!-- แสดงคอลัมน์ใน table -->
-          <q-select
-            v-model="visibleColumns"
-            :display-value="$q.lang.table.columns"
-            multiple
-            outlined
-            dense
-            :options="columns"
-            options-dense
-            option-value="name"
-            map-options
-            emit-value
-            style="min-width: 150px"
-            class="gt-xs q-ml-sm"
-          />
+          <q-select v-model="visibleColumns" :display-value="$q.lang.table.columns" multiple outlined dense
+            :options="columns" options-dense option-value="name" map-options emit-value style="min-width: 150px"
+            class="gt-xs q-ml-sm" />
         </div>
       </div>
-      <d-table
-        :rows="rows"
-        :columns="columns"
-        :visible-columns="visibleColumns"
-        :filter="filter"
-        row-key="name"
-      >
+      <d-table :rows="rows" :columns="columns" :visible-columns="visibleColumns" :filter="filter" row-key="name">
         <template v-slot:header="props">
           <q-tr :props="props">
             <q-th v-for="col in props.cols" :key="col.name" :props="props">
@@ -67,51 +36,23 @@ div
         </template>
         <template v-slot:body="props">
           <q-tr :props="props" class="cursor-pointer">
-            <q-td
-              v-for="col in props.cols"
-              :key="col.name"
-              :props="props"
-              @click="selectModal(props.row)"
-              >{{ col.name == "no" ? props.rowIndex + 1 : col.value }}</q-td
-            >
+            <q-td v-for="col in props.cols" :key="col.name" :props="props" @click="selectModal(props.row)">{{ col.name ==
+              "no" ? props.rowIndex + 1 : col.value }}</q-td>
             <q-td auto-width>
-              <q-btn
-                dense
-                size="12px"
-                flat
-                round
-                :color="props.rowIndex + 1 == 1 ? 'grey' : 'green'"
-                :disable="props.rowIndex + 1 == 1"
-                @click="upDown(props)"
-                icon="mdi-arrow-up-bold"
-              >
+              <q-btn dense size="12px" flat round :color="props.rowIndex + 1 == 1 ? 'grey' : 'green'"
+                :disable="props.rowIndex + 1 == 1" @click="upDown(props)" icon="mdi-arrow-up-bold">
                 <!-- <q-tooltip>เลื่อนลำดับขึ้น</q-tooltip> -->
               </q-btn>
             </q-td>
             <q-td auto-width>
-              <q-btn
-                dense
-                size="12px"
-                flat
-                round
-                :color="rows.length == props.rowIndex + 1 ? 'grey' : 'red'"
-                :disable="rows.length == props.rowIndex + 1"
-                @click="upDown(props, false)"
-                icon="mdi-arrow-down-bold"
-              >
+              <q-btn dense size="12px" flat round :color="rows.length == props.rowIndex + 1 ? 'grey' : 'red'"
+                :disable="rows.length == props.rowIndex + 1" @click="upDown(props, false)" icon="mdi-arrow-down-bold">
                 <!-- <q-tooltip>เลื่อนลำดับลง</q-tooltip> -->
               </q-btn>
             </q-td>
             <q-td auto-width>
-              <q-btn
-                dense
-                size="12px"
-                flat
-                round
-                color="red"
-                @click="dialogDeleteData(props.row.personalId)"
-                icon="mdi-delete"
-              >
+              <q-btn dense size="12px" flat round color="red" @click="dialogDeleteData(props.row.personalId)"
+                icon="mdi-delete">
                 <q-tooltip>ลบข้อมูล</q-tooltip>
               </q-btn>
             </q-td>
@@ -121,24 +62,9 @@ div
     </div>
     <q-separator />
     <div class="flex justify-end q-pa-sm q-gutter-sm">
-      <q-btn
-        dense
-        outline
-        color="primary"
-        icon="chevron_left"
-        @click="previous"
-        class="q-pr-md"
-        label="กรอกรายละเอียด"
-      >
+      <q-btn dense outline color="primary" icon="chevron_left" @click="previous" class="q-pr-md" label="กรอกรายละเอียด">
       </q-btn>
-      <q-btn
-        dense
-        unelevated
-        label="บันทึก"
-        color="public"
-        @click="save"
-        class="q-px-md"
-        ><!-- icon="mdi-content-save-outline"
+      <q-btn dense unelevated label="บันทึก" color="public" @click="save" class="q-px-md"><!-- icon="mdi-content-save-outline"
         <q-tooltip>บันทึก</q-tooltip> -->
       </q-btn>
       <!-- <q-btn dense flat round color="primary" icon="chevron_right" @click="next">
@@ -157,43 +83,22 @@ div
             <div class="col-xs-12">
               <div class="col-12 row q-py-sm items-center q-col-gutter-sm">
                 <div class="col-xs-6 col-sm-6 col-md-6">
-                  <q-input
-                    outlined
-                    dense
-                    lazy-rules
-                    v-model="modalData.salaryAmount"
-                    :rules="[(val) => !!val || `${'กรุณากรอกเงินเดือน'}`]"
-                    :label="`${'เงินเดือน'}`"
-                    type="number"
-                    hide-bottom-space
-                  />
+                  <q-input outlined dense lazy-rules v-model="modalData.salaryAmount"
+                    :rules="[(val) => !!val || `${'กรุณากรอกเงินเดือน'}`]" :label="`${'เงินเดือน'}`" type="number"
+                    hide-bottom-space />
                 </div>
 
                 <div class="col-xs-6 col-sm-6 col-md-6">
-                  <q-input
-                    outlined
-                    dense
-                    lazy-rules
-                    v-model="modalData.positionSalaryAmount"
-                    :label="`${'เงินประจำตำแหน่ง'}`"
-                    type="number"
-                    hide-bottom-space
-                  />
+                  <q-input outlined dense lazy-rules v-model="modalData.positionSalaryAmount"
+                    :label="`${'เงินประจำตำแหน่ง'}`" type="number" hide-bottom-space />
                   <!-- :rules="[
                       (val) => !!val || `${'กรุณากรอกเงินประจำตำแหน่ง'}`,
                     ]" -->
                 </div>
 
                 <div class="col-xs-6 col-sm-6 col-md-6">
-                  <q-input
-                    outlined
-                    dense
-                    lazy-rules
-                    v-model="modalData.mouthSalaryAmount"
-                    :label="`${'เงินค่าตอบแทนรายเดือน'}`"
-                    type="number"
-                    hide-bottom-space
-                  />
+                  <q-input outlined dense lazy-rules v-model="modalData.mouthSalaryAmount"
+                    :label="`${'เงินค่าตอบแทนรายเดือน'}`" type="number" hide-bottom-space />
                   <!-- :rules="[
                       (val) => !!val || `${'กรุณากรอกเงินค่าตอบแทนรายเดือน'}`,
                     ]" -->
@@ -204,14 +109,7 @@ div
         </q-card-section>
         <q-separator />
         <q-card-actions align="right">
-          <q-btn
-            dense
-            unelevated
-            label="บันทึก"
-            color="public"
-            @click="saveModal"
-            class="q-px-md"
-            ><!-- icon="mdi-content-save-outline"
+          <q-btn dense unelevated label="บันทึก" color="public" @click="saveModal" class="q-px-md"><!-- icon="mdi-content-save-outline"
         <q-tooltip>บันทึก</q-tooltip> -->
           </q-btn>
         </q-card-actions>
@@ -225,24 +123,12 @@ div
         <DialogHeader tittle="รายชื่อในการออกคำสั่ง" :close="modalAddChange" />
         <q-separator />
         <q-card-section class="q-pa-sm bg-grey-1">
-          <d-table
-            :rows="rows2"
-            :columns="columns"
-            :visible-columns="visibleColumns"
-            :filter="filter"
-            row-key="name"
-            selection="multiple"
-            v-model:selected="selected"
-          >
+          <d-table :rows="rows2" :columns="columns" :visible-columns="visibleColumns" :filter="filter" row-key="name"
+            selection="multiple" v-model:selected="selected">
             <template v-slot:header="props">
               <q-tr :props="props">
                 <q-th auto-width>
-                  <q-checkbox
-                    keep-color
-                    color="primary"
-                    dense
-                    v-model="props.selected"
-                  />
+                  <q-checkbox keep-color color="primary" dense v-model="props.selected" />
                 </q-th>
                 <q-th v-for="col in props.cols" :key="col.name" :props="props">
                   <span class="text-weight-medium">{{ col.label }}</span>
@@ -252,33 +138,17 @@ div
             <template v-slot:body="props">
               <q-tr :props="props" class="cursor-pointer">
                 <q-td>
-                  <q-checkbox
-                    keep-color
-                    color="primary"
-                    dense
-                    v-model="props.selected"
-                  />
+                  <q-checkbox keep-color color="primary" dense v-model="props.selected" />
                 </q-td>
-                <q-td
-                  v-for="col in props.cols"
-                  :key="col.name"
-                  :props="props"
-                  >{{ col.name == "no" ? props.rowIndex + 1 : col.value }}</q-td
-                >
+                <q-td v-for="col in props.cols" :key="col.name" :props="props">{{ col.name == "no" ? props.rowIndex + 1 :
+                  col.value }}</q-td>
               </q-tr>
             </template>
           </d-table>
         </q-card-section>
         <q-separator />
         <q-card-actions align="right">
-          <q-btn
-            dense
-            unelevated
-            label="บันทึก"
-            color="public"
-            @click="saveModalAdd"
-            class="q-px-md"
-            ><!-- icon="mdi-content-save-outline"
+          <q-btn dense unelevated label="บันทึก" color="public" @click="saveModalAdd" class="q-px-md"><!-- icon="mdi-content-save-outline"
         <q-tooltip>บันทึก</q-tooltip> -->
           </q-btn>
         </q-card-actions>
@@ -372,7 +242,6 @@ const columns = ref<QTableProps["columns"]>([
 const rows = ref<ResponseData[]>([]);
 const rows2 = ref<ResponseData[]>([]);
 const selected = ref<ResponseData[]>([]);
-const orderId = ref<string>(route.params.orderid.toString());
 
 onMounted(async () => {
   await conditionData();
@@ -382,8 +251,8 @@ const conditionData = async () => {
   const id = route.params.orderid
     ? route.params.orderid.toString()
     : localStorage.getItem("orderId")
-    ? localStorage.getItem("orderId")
-    : null;
+      ? localStorage.getItem("orderId")
+      : null;
   if (id !== null) {
     await getData(id);
   }
@@ -441,7 +310,7 @@ const dialogDeleteData = async (id: string) => {
     $q,
     "ยืนยันการลบข้อมูล",
     "ต้องการลบข้อมูลนี้ใช่หรือไม่?",
-    "mdi-help-circle-outline",
+    "mdi-delete",
     "ตกลง",
     "red",
     () => deleteData(id),
@@ -573,36 +442,44 @@ const putSalary = async (salary: any) => {
     positionSalaryAmount: Number(salary.positionSalaryAmount),
     monthSalaryAmount: Number(salary.mouthSalaryAmount),
   };
-  $q.dialog({
-    title: "ยืนยันการบันทึกข้อมูล",
-    message: "ต้องการยืนยันการบันทึกข้อมูลนี้ใช่หรือไม่?",
-    cancel: {
-      flat: true,
-      color: "negative",
+  dialogMessage(
+    $q,
+    "ยืนยันการบันทึกข้อมูล",
+    "ต้องการบันทึกข้อมูลนี้ใช่หรือไม่?",
+    "info",
+    "ตกลง",
+    "public",
+    async () => {
+      await http
+        .put(config.API.salaryOrder(personalId.value), modalData.value)
+        .then((res: any) => {
+          console.log(res);
+          success($q, "บันทึกข้อมูลสำเร็จ");
+        })
+        .catch((e) => {
+          console.log(e);
+          messageError($q, e);
+        })
+        .finally(async () => {
+          await conditionData();
+          modal.value = false;
+        });
     },
-    persistent: true,
-  }).onOk(async () => {
-    await http
-      .put(config.API.salaryOrder(personalId.value), modalData.value)
-      .then((res: any) => {
-        console.log(res);
-        success($q, "บันทึกข้อมูลสำเร็จ");
-      })
-      .catch((e) => {
-        console.log(e);
-        messageError($q, e);
-      })
-      .finally(async () => {
-        await conditionData();
-        modal.value = false;
-      });
-  });
+    undefined
+  );
 };
 
 const modalAddChange = async () => {
   modalAdd.value = !modalAdd.value;
   if (modalAdd.value == true) {
-    await fetchaddlist(orderId.value);
+    const id = route.params.orderid
+      ? route.params.orderid.toString()
+      : localStorage.getItem("orderId")
+        ? localStorage.getItem("orderId")
+        : null;
+    if (id !== null) {
+      await fetchaddlist(id);
+    }
   } else await conditionData();
 };
 const fetchaddlist = async (id: string) => {
@@ -637,37 +514,46 @@ const saveModalAdd = () => {
   if (myFormAdd.value !== null) {
     myFormAdd.value.validate().then(async (result: boolean) => {
       if (result && selected.value.length !== 0) {
-        $q.dialog({
-          title: "ยืนยันการเพิ่มรายชื่อออกคำสั่ง",
-          message: "ต้องการยืนยันการเพิ่มรายชื่อออกคำสั่งนี้ใช่หรือไม่?",
-          cancel: {
-            flat: true,
-            color: "negative",
+        dialogMessage(
+          $q,
+          "ยืนยันการเพิ่มรายชื่อออกคำสั่ง",
+          "ต้องการยืนยันการเพิ่มรายชื่อออกคำสั่งนี้ใช่หรือไม่?",
+          "info",
+          "ตกลง",
+          "public",
+          () => {
+            let data = [];
+            data.push(...selected.value.map((e: any) => e.refRecordId));
+            // console.log(data);
+            addlist(data);
           },
-          persistent: true,
-        }).onOk(async () => {
-          let data = [];
-          data.push(...selected.value.map((e: any) => e.refRecordId));
-          // console.log(data);
-          addlist(data);
-        });
+          undefined
+        );
+
       }
     });
   }
 };
 const addlist = async (data: Object) => {
-  await http
-    .post(config.API.personsOrder(orderId.value), data)
-    .then(() => {
-      success($q, "บันทึกสำเร็จ");
-    })
-    .catch((e: any) => {
-      console.log(e);
-      messageError($q, e);
-    })
-    .finally(() => {
-      modalAddChange();
-    });
+  const id = route.params.orderid
+    ? route.params.orderid.toString()
+    : localStorage.getItem("orderId")
+      ? localStorage.getItem("orderId")
+      : null;
+  if (id !== null) {
+    await http
+      .post(config.API.personsOrder(id), data)
+      .then(() => {
+        success($q, "บันทึกสำเร็จ");
+      })
+      .catch((e: any) => {
+        console.log(e);
+        messageError($q, e);
+      })
+      .finally(() => {
+        modalAddChange();
+      });
+  }
 };
 
 const click = (e: any) => {
@@ -677,18 +563,20 @@ const click = (e: any) => {
 
 const save = () => {
   if (selected.value.length > 0) {
-    $q.dialog({
-      title: "ยืนยันการบันทึกข้อมูล",
-      message: "ต้องการยืนยันการบันทึกข้อมูลนี้ใช่หรือไม่?",
-      cancel: {
-        flat: true,
-        color: "negative",
+    dialogMessage(
+      $q,
+      "ยืนยันการบันทึกข้อมูล",
+      "ต้องการยืนยันการบันทึกข้อมูลนี้ใช่หรือไม่?",
+      "info",
+      "ตกลง",
+      "public",
+      () => {
+        success($q, "บันทึกข้อมูลสำเร็จ");
+        next();
       },
-      persistent: true,
-    }).onOk(async () => {
-      success($q, "บันทึกข้อมูลสำเร็จ");
-      next();
-    });
+      undefined
+    );
+
   } else {
     dialogMessage(
       $q,
@@ -704,8 +592,6 @@ const save = () => {
   }
 };
 
-const selectData = (row: any) => {};
-
 const refresh = async () => {
   // await conditionData();
   modalAddChange();
@@ -725,4 +611,4 @@ const getClass = (val: boolean) => {
   };
 };
 </script>
-<style lang="scss"></style>
+<style lang="scss"></style>
\ No newline at end of file
diff --git a/src/modules/10_order/components/step/step03.vue b/src/modules/10_order/components/step/step03.vue
index c71389d9e..d95c3de90 100644
--- a/src/modules/10_order/components/step/step03.vue
+++ b/src/modules/10_order/components/step/step03.vue
@@ -632,7 +632,7 @@ const clickDelete = (id: string) => {
     $q,
     "ยืนยันการลบข้อมูล",
     "ต้องการลบข้อมูลนี้ใช่หรือไม่?",
-    "mdi-help-circle-outline",
+    "mdi-delete",
     "ตกลง",
     "red",
     () => deleteData(id),
diff --git a/src/modules/10_order/components/step/step04.vue b/src/modules/10_order/components/step/step04.vue
index f6945d914..99e613d43 100644
--- a/src/modules/10_order/components/step/step04.vue
+++ b/src/modules/10_order/components/step/step04.vue
@@ -6,8 +6,8 @@
           <div class="space">
             <div @click="setTab('main')" :class="getClass(tab == 'main')">
               <div class="q-pr-sm">คำสั่ง</div>
-              <q-btn v-show="OrderPDF == ''" size="12px" flat dense icon="mdi-download"
-                :disable="tab !== 'main'" :color="tab !== 'main' ? 'grey' : 'add'">
+              <q-btn v-show="OrderPDF == ''" 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">
@@ -25,8 +25,8 @@
             </div>
             <div @click="setTab('second')" :class="getClass(tab == 'second')">
               <div class="q-pr-sm">เอกสารแนบท้าย</div>
-              <q-btn v-show="TailerPDF == ''" size="12px" flat dense
-                :color="tab !== 'second' ? 'grey' : 'add'" icon="mdi-download" :disable="tab !== 'second'">
+              <q-btn v-show="TailerPDF == ''" size="12px" flat dense :color="tab !== 'second' ? 'grey' : 'add'"
+                icon="mdi-download" :disable="tab !== 'second'">
                 <q-tooltip>ดาวน์โหลด</q-tooltip>
                 <q-menu>
                   <q-list style="min-width: 150px">
@@ -252,7 +252,7 @@ import http from "@/plugins/http";
 import config from "@/app.config";
 
 const mixin = useCounterMixin();
-const { date2Thai, messageError, showLoader, hideLoader } = mixin;
+const { date2Thai, messageError, showLoader, hideLoader, dialogMessage } = mixin;
 const route = useRoute();
 const $q = useQuasar();
 
@@ -383,24 +383,23 @@ const save = () => {
     myForm.value!.validate().then((success: Boolean) => {
       if (success) {
         // yay, models are correct
-        $q.dialog({
-          title: "ยืนยันการบันทึกข้อมูล",
-          message: "ต้องการบันทึกข้อมูลนี้ใช่หรือไม่?",
-          cancel: {
-            flat: true,
-            color: "negative",
-          },
-          persistent: true,
-        })
-          .onOk(async () => {
+        dialogMessage(
+          $q,
+          "ยืนยันการบันทึกข้อมูล",
+          "ต้องการยืนยันการบันทึกข้อมูลนี้ใช่หรือไม่?",
+          "info",
+          "ตกลง",
+          "public",
+          async () => {
             await putOrderData();
             await postfileOrder();
             await postfileTailer();
             await fetchAttachment(orderId.value);
             await fecthstatusOrder(orderId.value);
-          })
-          .onCancel(() => { })
-          .onDismiss(() => { });
+          },
+          undefined
+        );
+
       }
     });
   }
@@ -432,16 +431,14 @@ const postfileTailer = async () => {
   await http.post(config.API.attachmentFileId(orderId.value), formData);
 };
 const clickExecute = async (id: string) => {
-  $q.dialog({
-    title: "ยืนยันการออกคำสั่ง",
-    message: "ต้องการยืนยันการออกคำสั่งข้อมูลนี้ใช่หรือไม่?",
-    cancel: {
-      flat: true,
-      color: "negative",
-    },
-    persistent: true,
-  })
-    .onOk(async () => {
+  dialogMessage(
+    $q,
+    "ยืนยันการออกคำสั่ง",
+    "ต้องการยืนยันการออกคำสั่งนี้ใช่หรือไม่?",
+    "info",
+    "ตกลง",
+    "public",
+    async () => {
       await http
         .put(config.API.executeOrder(id))
         .then((res) => {
@@ -450,9 +447,9 @@ const clickExecute = async (id: string) => {
         .catch((e) => {
           messageError($q, e);
         });
-    })
-    .onCancel(() => { })
-    .onDismiss(() => { });
+    },
+    undefined
+  );
 };
 
 const validateForm = () => {
diff --git a/src/modules/10_order/router.ts b/src/modules/10_order/router.ts
index a059df203..b42e3161d 100644
--- a/src/modules/10_order/router.ts
+++ b/src/modules/10_order/router.ts
@@ -1,12 +1,6 @@
-/**
- * Router บรรจุ แต่งตั้ง ย้าย โอน (Placement)
- */
-
-const AddPage = () =>
-  import("@/modules/10_order/components/Add.vue");
+// const AddPage = () => import("@/modules/10_order/components/Add.vue");
 const MainOrder = () => import("@/modules/10_order/components/Main.vue");
-const DetailPage = () =>
-  import("@/modules/10_order/components/Detail.vue");
+const DetailPage = () => import("@/modules/10_order/components/Detail.vue");
 
 export default [
   {
@@ -16,16 +10,17 @@ export default [
     meta: {
       Auth: true,
       Key: [10],
-      Role: "placement",
+      Role: "order",
     },
   },
   {
     path: "/order/add",
     name: "OrderAdd",
-    component: AddPage,
+    component: DetailPage,
     meta: {
       Auth: true,
-      Role: "placement",
+      Key: [10],
+      Role: "order",
     },
   },
   {
@@ -34,7 +29,8 @@ export default [
     component: DetailPage,
     meta: {
       Auth: true,
-      Role: "placement",
+      Key: [10],
+      Role: "order",
     },
   },
 ];