From 1f96ec8c2e84e4ffd24876d3c74fa1a39264b79b Mon Sep 17 00:00:00 2001
From: "DESKTOP-1R2VSQH\\Lenovo ThinkPad E490" <nicey2t1096@gmail.com>
Date: Mon, 21 Aug 2023 18:07:35 +0700
Subject: [PATCH 1/2] =?UTF-8?q?=E0=B8=9B=E0=B8=A3=E0=B8=B1=E0=B8=9A=20?=
 =?UTF-8?q?=E0=B9=80=E0=B8=84=E0=B8=A3=E0=B8=B7=E0=B9=88=E0=B8=AD=E0=B8=87?=
 =?UTF-8?q?=E0=B8=A3=E0=B8=B2=E0=B8=87?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../07_insignia/components/2_Manage/Tab1.vue  | 136 +++++++++++++++++-
 .../07_insignia/components/2_Manage/Tab2.vue  |  75 ++++++----
 .../07_insignia/components/2_Manage/Tab3.vue  |  58 ++++++--
 3 files changed, 228 insertions(+), 41 deletions(-)

diff --git a/src/modules/07_insignia/components/2_Manage/Tab1.vue b/src/modules/07_insignia/components/2_Manage/Tab1.vue
index f96c72b1b..418e6ea82 100644
--- a/src/modules/07_insignia/components/2_Manage/Tab1.vue
+++ b/src/modules/07_insignia/components/2_Manage/Tab1.vue
@@ -21,6 +21,7 @@ const DataStore = useInsigniaDataStore();
 
 const modalNote = ref<boolean>(false);
 const modalAdd = ref<boolean>(false);
+const modalEdit = ref<boolean>(false);
 const organization = ref<string>("");
 const organizationOptions = ref<any>([{ id: "1", name: "ทั้งหมด" }]);
 const visibleColumns = ref<string[]>([
@@ -255,6 +256,7 @@ const props = defineProps({
 });
 const typeinsignia = ref<number | string>("all");
 const typeinsigniaOptions = reactive<any>([{ id: "all", name: "ทั้งหมด" }]);
+const typeinsigniaValues: Set<number> = new Set();
 onMounted(async () => {
   organizationOptions.value = DataStore.optionsTypeOc;
   organization.value = organizationOptions.value[0].id;
@@ -269,7 +271,7 @@ onMounted(async () => {
         "officer",
         props.tab
       );
-    
+      filtertypeInsignia();
     }
   }
 });
@@ -353,10 +355,10 @@ const addlistperson = async (id: string) => {
   showLoader();
   let data = {
     profileId: id,
-    insigniaId: organization.value,
+    // insigniaId: organization.value,
     insigniaPeriodId: props.roundId,
   };
-  // console.log(data);
+  console.log(data);
   await http
     .post(config.API.insigniaCreate(), data)
     .then(() => {
@@ -387,7 +389,12 @@ const addlistperson = async (id: string) => {
 //   actionModal.value = action;
 //   modalNote.value = true;
 // };
-const clickEdit = () => {
+const clickmodalEdit = () => {
+  modalEdit.value = true;
+  fecthInsignia();
+  fecthInsigniaType();
+};
+const clickSave = () => {
   dialogConfirm(
     $q,
     async () => {
@@ -449,6 +456,52 @@ const listdelete = async () => {
       messageError($q, err);
     });
 };
+const insignia = ref<string>("");
+const insigniaOptions = ref<any>([]);
+const insigniaType = ref<string>("");
+const insigniaTypeOptions = ref<any>([]);
+
+const fecthInsignia = async () => {
+  await http
+    .get(config.API.insignia)
+    .then((res) => {
+      insigniaOptions.value = res.data.result;
+    })
+    .catch((err) => {});
+};
+const fecthInsigniaType = async () => {
+  await http(config.API.insigniaType)
+    .then((res) => {
+      insigniaTypeOptions.value = res.data.result;
+    })
+    .catch((err) => {});
+};
+
+const listinsignia = ref<any>([]);
+const filtertypeInsignia = async () => {
+  listinsignia.value = rows.value;
+  for (const data of listinsignia.value) {
+    const Type = data.insigniaType;
+    if (Type !== null && !typeinsigniaValues.has(Type)) {
+      typeinsigniaOptions.push({
+        id: Type.toString(),
+        name: Type.toString(),
+      });
+      typeinsigniaValues.add(Type);
+    }
+  }
+};
+const searchFilterTable = async () => {
+  if (typeinsignia.value !== undefined && typeinsignia.value !== null) {
+    if (typeinsignia.value === "all") {
+      rows.value = listinsignia.value;
+    } else {
+      rows.value = listinsignia.value.filter(
+        (e) => e.insigniaType === typeinsignia.value
+      );
+    }
+  }
+};
 
 const filterKeyword = ref<string>("");
 const filterKeyword2 = ref<string>("");
@@ -519,7 +572,7 @@ const paginationLabel2 = (start: string, end: string, total: string) => {
           :outlined="true"
           :hide-dropdown-icon="false"
           style="min-width: 150px"
-          @update:model-value="changtypeOc"
+          @update:model-value="searchFilterTable"
         />
         <div>
           <q-btn size="md" icon="mdi-download" flat round color="primary">
@@ -648,7 +701,7 @@ const paginationLabel2 = (start: string, end: string, total: string) => {
                       <q-item
                         clickable
                         v-close-popup
-                        @click="clickEdit(props.row)"
+                        @click="clickmodalEdit(props.row)"
                       >
                         <q-item-section
                           style="min-width: 0px"
@@ -814,6 +867,77 @@ const paginationLabel2 = (start: string, end: string, total: string) => {
     </q-card>
   </q-dialog>
 
+  <!-- Edit -->
+  <q-dialog v-model="modalEdit" persistent>
+    <q-card style="width: 450px; max-width: 80vw" class="q-pb-md">
+      <q-toolbar class="q-py-md">
+        <q-toolbar-title class="text-h6"
+          >แก้ไขเครื่องราชฯ ที่ยื่นขอ
+        </q-toolbar-title>
+        <q-btn
+          icon="close"
+          unelevated
+          round
+          dense
+          @click="modalEdit = false"
+          style="color: #ff8080; background-color: #ffdede"
+        />
+      </q-toolbar>
+      <q-separator />
+
+      <div class="q-pa-md">
+        <div class="row q-col-gutter-sm">
+          <div class="col">
+            <q-select
+              v-model="insigniaType"
+              label="ประเภทเครื่องราชฯ"
+              dense
+              emit-value
+              map-options
+              :options="insigniaTypeOptions"
+              option-value="id"
+              option-label="name"
+              lazy-rules
+              hide-bottom-space
+              :readonly="false"
+              :borderless="false"
+              :outlined="true"
+              :hide-dropdown-icon="false"
+              style="min-width: 150px"
+              @update:model-value="changtypeOc"
+            />
+          </div>
+          <div class="col">
+            <q-select
+              v-model="insignia"
+              label="ชั้นเครื่องราชฯ"
+              dense
+              emit-value
+              map-options
+              :options="insigniaOptions"
+              option-value="id"
+              option-label="name"
+              lazy-rules
+              hide-bottom-space
+              :readonly="false"
+              :borderless="false"
+              :outlined="true"
+              :hide-dropdown-icon="false"
+              style="min-width: 150px"
+              @update:model-value="changtypeOc"
+            />
+          </div>
+        </div>
+      </div>
+      <q-separator />
+      <div class="q-pa-md">
+        <div class="row justify-end">
+          <q-btn label="บันทึก" @click="clickSave" color="public" />
+        </div>
+      </div>
+    </q-card>
+  </q-dialog>
+
   <!-- note -->
   <q-dialog v-model="modalNote" persistent>
     <q-card style="min-width: 350px">
diff --git a/src/modules/07_insignia/components/2_Manage/Tab2.vue b/src/modules/07_insignia/components/2_Manage/Tab2.vue
index 15e972d72..9bec42a41 100644
--- a/src/modules/07_insignia/components/2_Manage/Tab2.vue
+++ b/src/modules/07_insignia/components/2_Manage/Tab2.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { onMounted, ref, watch } from "vue";
+import { onMounted, ref, watch, reactive } from "vue";
 import type { QTableProps } from "quasar";
 import { useInsigniaDataStore } from "@/modules/07_insignia/store";
 import http from "@/plugins/http";
@@ -207,6 +207,7 @@ onMounted(async () => {
         "officer",
         props.tab
       );
+      filtertypeInsignia();
     }
   }
 });
@@ -220,23 +221,35 @@ const changtypeOc = () => {
     );
   }
 };
-// const fecthInsigniaAll = async () => {
-//   let data: any = [];
-//   for (const item of DataStore.optionsTypeOc) {
-//     await http
-//       .get(
-//         config.API.insigniaList(props.roundId, item["id"], "officer", props.tab)
-//       )
-//       .then((res) => {
-//         // console.log(res);
-//         data.push(res.data.result);
-//       })
-//       .catch((err) => {
-//         console.log(err);
-//       });
-//   }
-//   console.log(data);
-// };
+
+const typeinsignia = ref<number | string>("all");
+const typeinsigniaOptions = reactive<any>([{ id: "all", name: "ทั้งหมด" }]);
+const typeinsigniaValues: Set<number> = new Set();
+const listinsignia = ref<any>([]);
+const filtertypeInsignia = async () => {
+  listinsignia.value = rows.value;
+  for (const data of listinsignia.value) {
+    const Type = data.insigniaType;
+    if (Type !== null && !typeinsigniaValues.has(Type)) {
+      typeinsigniaOptions.push({
+        id: Type.toString(),
+        name: Type.toString(),
+      });
+      typeinsigniaValues.add(Type);
+    }
+  }
+};
+const searchFilterTable = async () => {
+  if (typeinsignia.value !== undefined && typeinsignia.value !== null) {
+    if (typeinsignia.value === "all") {
+      rows.value = listinsignia.value;
+    } else {
+      rows.value = listinsignia.value.filter(
+        (e) => e.insigniaType === typeinsignia.value
+      );
+    }
+  }
+};
 
 const filterKeyword = ref<string>("");
 const filterRef = ref<any>(null);
@@ -278,14 +291,24 @@ const paginationLabel = (start: string, end: string, total: string) => {
           style="min-width: 150px"
           @update:model-value="changtypeOc"
         />
-        <!-- <div>
-          <q-btn size="md" icon="mdi-download" flat round color="primary">
-            <q-tooltip>ดาวน์โหลด</q-tooltip>
-          </q-btn>
-          <q-btn size="12px" flat round color="add" icon="mdi-plus">
-            <q-tooltip>เพิ่ม</q-tooltip>
-          </q-btn>
-        </div> -->
+        <q-select
+          v-model="typeinsignia"
+          label="ปรเภทเครื่องราชฯ"
+          dense
+          emit-value
+          map-options
+          :options="typeinsigniaOptions"
+          option-value="id"
+          option-label="name"
+          lazy-rules
+          hide-bottom-space
+          :readonly="false"
+          :borderless="false"
+          :outlined="true"
+          :hide-dropdown-icon="false"
+          style="min-width: 150px"
+          @update:model-value="searchFilterTable"
+        />
         <q-space />
 
         <q-input
diff --git a/src/modules/07_insignia/components/2_Manage/Tab3.vue b/src/modules/07_insignia/components/2_Manage/Tab3.vue
index 7a934f16f..a1656c1e8 100644
--- a/src/modules/07_insignia/components/2_Manage/Tab3.vue
+++ b/src/modules/07_insignia/components/2_Manage/Tab3.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { onMounted, ref, watch } from "vue";
+import { onMounted, ref, watch, reactive } from "vue";
 import { useQuasar } from "quasar";
 import type { QTableProps } from "quasar";
 import { useInsigniaDataStore } from "@/modules/07_insignia/store";
@@ -206,6 +206,7 @@ onMounted(async () => {
         "officer",
         props.tab
       );
+      filtertypeInsignia();
     }
   }
 });
@@ -220,6 +221,35 @@ const changtypeOc = () => {
   }
 };
 
+const typeinsignia = ref<number | string>("all");
+const typeinsigniaOptions = reactive<any>([{ id: "all", name: "ทั้งหมด" }]);
+const typeinsigniaValues: Set<number> = new Set();
+const listinsignia = ref<any>([]);
+const filtertypeInsignia = async () => {
+  listinsignia.value = rows.value;
+  for (const data of listinsignia.value) {
+    const Type = data.insigniaType;
+    if (Type !== null && !typeinsigniaValues.has(Type)) {
+      typeinsigniaOptions.push({
+        id: Type.toString(),
+        name: Type.toString(),
+      });
+      typeinsigniaValues.add(Type);
+    }
+  }
+};
+const searchFilterTable = async () => {
+  if (typeinsignia.value !== undefined && typeinsignia.value !== null) {
+    if (typeinsignia.value === "all") {
+      rows.value = listinsignia.value;
+    } else {
+      rows.value = listinsignia.value.filter(
+        (e) => e.insigniaType === typeinsignia.value
+      );
+    }
+  }
+};
+
 const filterKeyword = ref<string>("");
 const filterRef = ref<any>(null);
 const resetFilter = () => {
@@ -260,14 +290,24 @@ const paginationLabel = (start: string, end: string, total: string) => {
           style="min-width: 150px"
           @update:model-value="changtypeOc"
         />
-        <!-- <div>
-          <q-btn size="md" icon="mdi-download" flat round color="primary">
-            <q-tooltip>ดาวน์โหลด</q-tooltip>
-          </q-btn>
-          <q-btn size="12px" flat round color="add" icon="mdi-plus">
-            <q-tooltip>เพิ่ม</q-tooltip>
-          </q-btn>
-        </div> -->
+        <q-select
+          v-model="typeinsignia"
+          label="ปรเภทเครื่องราชฯ"
+          dense
+          emit-value
+          map-options
+          :options="typeinsigniaOptions"
+          option-value="id"
+          option-label="name"
+          lazy-rules
+          hide-bottom-space
+          :readonly="false"
+          :borderless="false"
+          :outlined="true"
+          :hide-dropdown-icon="false"
+          style="min-width: 150px"
+          @update:model-value="searchFilterTable"
+        />
         <q-space />
 
         <q-input

From 8f16fadeead83172318e9065e64b7116f2a31393 Mon Sep 17 00:00:00 2001
From: waruneeta <warunee.auy@gmail.com>
Date: Mon, 21 Aug 2023 18:31:23 +0700
Subject: [PATCH 2/2] =?UTF-8?q?-=20=E0=B8=9C=E0=B8=B9=E0=B8=81=20api=20?=
 =?UTF-8?q?=E0=B8=AD=E0=B8=AD=E0=B8=81=E0=B8=84=E0=B8=B3=E0=B8=AA=E0=B8=B1?=
 =?UTF-8?q?=E0=B9=88=E0=B8=87=E0=B9=83=E0=B8=AB=E0=B9=89=E0=B8=84=E0=B8=A3?=
 =?UTF-8?q?=E0=B8=9A=20loop=20-=20=E0=B9=81=E0=B8=81=E0=B9=89=20label?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/index.ts                              |   6 +
 src/api/reports/api.report.ts                 |  10 ++
 src/app.config.ts                             |   6 +
 .../components/Repatriate/RepatriatebyId.vue  |   2 +-
 src/modules/10_order/components/Detail.vue    |   7 +-
 .../10_order/components/step/step01.vue       | 163 +++++++++++-------
 .../10_order/components/step/step02.vue       |   2 +-
 .../10_order/components/step/step03.vue       |   2 +-
 .../10_order/components/step/step04.vue       |  84 +++++++--
 9 files changed, 196 insertions(+), 86 deletions(-)
 create mode 100644 src/api/reports/api.report.ts

diff --git a/src/api/index.ts b/src/api/index.ts
index 9b092ddf6..4c46a4e20 100644
--- a/src/api/index.ts
+++ b/src/api/index.ts
@@ -29,6 +29,7 @@ const config = ref<any>({
     // API_PROBATION_URI: "https://ehr.joolsoft.com/v1",
     API_PROBATION_URI: "https://bmaehr.joolsoft.com/nodeapi/v1",
     // API_PROBATION_URI: "http://192.168.1.151:7776/v1",
+    API_REPORT2_URI: "https://bma-ehr.frappet.synology.me/api/v2",
   },
   test: {
     API_URI: "http://localhost:5010/api/v1",
@@ -50,6 +51,7 @@ const config = ref<any>({
     MEET_URI: "meet.frappet.com",
     API_RETIREMENT_URI: `${window.location.protocol}//${window.location.host}/api/v1`,
     API_PROBATION_URI: "https://bmaehr.joolsoft.com/nodeapi/v1",
+    API_REPORT2_URI: `${window.location.protocol}//${window.location.host}/api/v2`,
   },
 });
 
@@ -78,6 +80,9 @@ const API_URI_ORG_TREE = ref<string>(config.value[env.value].API_URI_ORG_TREE);
 const API_PROBATION_URI = ref<string>(
   config.value[env.value].API_PROBATION_URI
 );
+const API_REPORT2_URI = ref<string>(
+  config.value[env.value].API_REPORT2_URI
+);
 
 export default {
   env: env.value,
@@ -93,4 +98,5 @@ export default {
   MEET_URI: MEET_URI.value,
   API_RETIREMENT_URI: API_RETIREMENT_URI.value,
   API_PROBATION_URI: API_PROBATION_URI.value,
+  API_REPORT2_URI: API_REPORT2_URI.value,
 };
diff --git a/src/api/reports/api.report.ts b/src/api/reports/api.report.ts
new file mode 100644
index 000000000..c025232d2
--- /dev/null
+++ b/src/api/reports/api.report.ts
@@ -0,0 +1,10 @@
+/**
+ * api รายงานทั้งหมด
+ */
+import env from "../index";
+const reportOrder = `${env.API_REPORT2_URI}/report/order`;
+
+export default {
+  reportOrderCover: (fileType: string, id: string) => `${reportOrder}/cover/${fileType}/${id}`,
+  reportOrderAttachment: (fileType: string, id: string) => `${reportOrder}/attachment/${fileType}/${id}`,
+};
diff --git a/src/app.config.ts b/src/app.config.ts
index b8bb88983..801a88941 100644
--- a/src/app.config.ts
+++ b/src/app.config.ts
@@ -40,6 +40,9 @@ import insignia from "./api/07_insignia/api.insignia";
 /** API dashboard  */
 import message from "./api/00_dashboard/api.message";
 
+/** API reports  */
+import reports from "./api/reports/api.report";
+
 // environment variables
 export const compettitivePanel = import.meta.env.VITE_COMPETITIVE_EXAM_PANEL;
 export const qualifyDisableExamPanel = import.meta.env
@@ -80,6 +83,9 @@ const API = {
 
   //dashboard
   ...message,
+
+  //reports
+  ...reports,
 };
 
 export default {
diff --git a/src/modules/05_placement/components/Repatriate/RepatriatebyId.vue b/src/modules/05_placement/components/Repatriate/RepatriatebyId.vue
index ece92154d..83df19af8 100644
--- a/src/modules/05_placement/components/Repatriate/RepatriatebyId.vue
+++ b/src/modules/05_placement/components/Repatriate/RepatriatebyId.vue
@@ -47,7 +47,7 @@
   <q-card bordered class="row col-12 text-dark q-mt-sm">
     <div class="bg-grey-1 q-pa-sm col-12 row items-center text-primary">
       <div class="q-pl-sm text-weight-bold text-dark">
-        แก้ไขข้อมูลเพื่อลงบัญชี
+        แก้ไขข้อมูลเพื่อลงบัญชีแนบท้าย
       </div>
       <q-space />
       <div class="q-gutter-sm" v-if="!edit">
diff --git a/src/modules/10_order/components/Detail.vue b/src/modules/10_order/components/Detail.vue
index 8a5c8b4db..b29d17980 100644
--- a/src/modules/10_order/components/Detail.vue
+++ b/src/modules/10_order/components/Detail.vue
@@ -1,6 +1,7 @@
 <template>
   <div class="toptitle text-dark col-12 row items-center">
-    <q-btn icon="mdi-arrow-left" unelevated round dense flat color="primary" class="q-mr-sm" @click="router.go(-1), destroyLocalStorage()" />
+    <q-btn icon="mdi-arrow-left" unelevated round dense flat color="primary" class="q-mr-sm"
+      @click="router.go(-1), destroyLocalStorage()" />
     ออกคำสั่ง
   </div>
   <q-card flat bordered class="col-12 q-my-sm q-mt-sm">
@@ -60,7 +61,7 @@ onUnmounted(() => {
 
 const nextStep = async () => {
   stepper.value!.next();
-  localStorage.setItem("currentStep", step.value.toString());
+  localStorage.setItem("currentStep", (step.value + 1).toString());
   if (orderId.value) {
     await http
       .put(config.API.nextStep(orderId.value))
@@ -74,7 +75,7 @@ const nextStep = async () => {
 };
 const previousStep = async () => {
   stepper.value!.previous();
-  localStorage.setItem("currentStep", step.value.toString());
+  localStorage.setItem("currentStep", (step.value - 1).toString());
   if (orderId.value) {
     await http
       .put(config.API.prevStep(orderId.value))
diff --git a/src/modules/10_order/components/step/step01.vue b/src/modules/10_order/components/step/step01.vue
index 60a60e0db..cca81ea63 100644
--- a/src/modules/10_order/components/step/step01.vue
+++ b/src/modules/10_order/components/step/step01.vue
@@ -203,20 +203,22 @@ onMounted(async () => {
     fecthTypeOption("noData");
   }
 });
+
 watch(byOrder, async () => {
   await http
     .get(config.API.approverOC(byOrder.value))
     .then((res: any) => {
       CommandOption.value = res.data.result;
-      console.log(CommandOption.value);
+      // console.log(CommandOption.value);
     })
     .catch((e: any) => {
       console.log(e);
     });
 });
+
 watch(nameCommand, async () => {
-  console.log(nameCommand.value);
-  console.log(positionCommand.value);
+  // console.log(nameCommand.value);
+  // console.log(positionCommand.value);
 
   if (positionCommand.value === "" || positionCommand.value === undefined) {
     positionCommand.value = nameCommand.value.positionName;
@@ -250,12 +252,13 @@ const fecthTypeOption = async (actions: string) => {
       hideLoader();
     });
 };
+
 const fetchdetailOrder = async () => {
   let orderIdString = orderId.toString();
   await http
     .get(config.API.detailOrder(orderIdString))
     .then((res: any) => {
-      console.log(typeOrderOption.value);
+      // console.log(typeOrderOption.value);
 
       const data = res.data.result;
       typeOrder.value = typeOrderOption.value.find(
@@ -268,7 +271,7 @@ const fetchdetailOrder = async () => {
       byOrder.value = data.orderBy;
       nameCommand.value = data.signatoryBy;
       positionCommand.value = data.signatoryPosition;
-      console.log(nameCommand.value);
+      // console.log("nameCommand===>",nameCommand.value);
 
       examRound.value = data.examRound;
       conclusionRegisterNo.value = data.conclusionRegisterNo;
@@ -307,6 +310,19 @@ const fecthExamRoundOption = async () => {
 };
 
 const submit = async () => {
+  console.log("nameCommand ===>", nameCommand.value);
+
+  let signBy = null;
+  if (!nameCommand.value.length) {
+    signBy = await nameCommand.value.name;
+  } else {
+    const name2 = await CommandOption.value.find((x: any) => x.id == nameCommand.value.id);
+    signBy = await name2?.name;
+    console.log("signBy", signBy);
+  }
+
+  const orderByOrganizationName = await byOrderOption.value.find((x:any)=>x.id == byOrder.value)?.name;
+
   const formdata = {
     orderTypeValue: typeOrder.value.id,
     orderTitle: nameOrder.value,
@@ -315,13 +331,30 @@ const submit = async () => {
     orderYear: dateYear.value,
     orderDate: dateCommand.value,
     orderBy: byOrder.value,
+    orderByOrganizationName: orderByOrganizationName,
     registerPosition: "",
-    signatoryBy:
-      nameCommand.value.id === undefined
-        ? nameCommand.value
-        : nameCommand.value.id,
+    signatoryBy: signBy,
     signatoryPosition: positionCommand.value,
   };
+
+  //   {
+  //   "orderTypeValue": "3fa85f64-5717-4562-b3fc-2c963f66afa6",
+  //   "orderTitle": "string",
+  //   "orderNo": "string",
+  //   "orderYear": 0,
+  //   "orderDate": "2023-08-21T09:46:54.354Z",
+  //   "orderBy": "3fa85f64-5717-4562-b3fc-2c963f66afa6",
+  //   "orderByOrganizationName": "string",
+  //   "signatoryBy": "string",
+  //   "signatoryPosition": "string",
+  //   "examRound": "3fa85f64-5717-4562-b3fc-2c963f66afa6",
+  //   "registerPosition": "string",
+  //   "conclusionRegisterNo": "string",
+  //   "conclusionRegisterDate": "2023-08-21T09:46:54.354Z",
+  //   "conclusionResultNo": "string",
+  //   "conclusionResultDate": "2023-08-21T09:46:54.354Z"
+  // }
+
   if (
     typeOrder.value.commandCode == "C-PM-01" ||
     typeOrder.value.commandCode == "C-PM-02" ||
@@ -448,7 +481,7 @@ const updateOrder = async (formData: Object, orderId: string) => {
     .then((res) => {
       console.log(res);
       next();
-      success($q, "แก้ไขข้อมูลสำเร็จ");
+      success($q, "บันทึกข้อมูลสำเร็จ");
     })
     .catch((e) => {
       messageError($q, e);
@@ -486,7 +519,8 @@ const getClass = (val: boolean) => {
         </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" hide-bottom-space :label="`${'คำสั่งเลขที่'}`"/>
+            <q-input :class="getClass(true)" outlined dense lazy-rules v-model="command" hide-bottom-space
+              :label="`${'คำสั่งเลขที่'}`" />
           </div>
           <label class="col-1 flex justify-center items-center text-bold">/</label>
           <div class="col-5">
@@ -527,7 +561,7 @@ const getClass = (val: boolean) => {
           <selector :class="getClass(true)" outlined dense lazy-rules v-model="byOrder"
             :rules="[(val: string) => !!val || `${'กรุณาเลือกคำสั่งโดย'}`]" emit-value hide-bottom-space
             :label="`${'คำสั่งโดย'}`" map-options option-label="name" :options="byOrderOption" option-value="id" use-input
-            input-debounce="0" @update:model-value="(nameCommand = ''), (positionCommand = '')" />
+            input-debounce="0" @update:model-value="(nameCommand = ''), (positionCommand = ''), (console.log(byOrder))" />
         </div>
         <div class="col-xs-12 col-md-6">
           <selector :class="getClass(true)" outlined dense lazy-rules v-model="nameCommand"
@@ -1009,7 +1043,7 @@ const getClass = (val: boolean) => {
               :rules="[(val) => !!val || `${'กรุณากรอกให้ดำรงตำแหน่ง ณ'}`]" :label="`${'ให้ดำรงตำแหน่ง ณ'}`"
               hide-bottom-space />
           </div>
-          
+
           <div class="col-xs-12 col-md-4">
             <q-input :class="getClass(true)" outlined dense lazy-rules v-model="experimentOc" :rules="[
               (val) =>
@@ -1019,58 +1053,58 @@ const getClass = (val: boolean) => {
           </div>
           <div class="col-md-4"></div>
 
-            <div class="col-xs-12 col-md-4">
-              <datepicker menu-class-name="modalfix" v-model="experimentformDate" :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 outlined dense class="full-width datepicker" :model-value="experimentformDate != null
-                    ? date2Thai(experimentformDate)
-                    : null
-                    " :label="`${'ทดลองปฏิบัติหน้าที่ราชการตั้งแต่วันที่ '}`" :rules="[
+          <div class="col-xs-12 col-md-4">
+            <datepicker menu-class-name="modalfix" v-model="experimentformDate" :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 outlined dense class="full-width datepicker" :model-value="experimentformDate != null
+                  ? date2Thai(experimentformDate)
+                  : null
+                  " :label="`${'ทดลองปฏิบัติหน้าที่ราชการตั้งแต่วันที่ '}`" :rules="[
     (val) =>
       !!val ||
       `${'กรุณาเลือกลงวันที่ทดลองปฏิบัติหน้าที่ราชการตั้งแต่วันที่ '}`,
   ]">
-                    <template v-slot:prepend>
-                      <q-icon name="event" class="cursor-pointer" style="color: var(--q-primary)">
-                      </q-icon>
-                    </template>
-                  </q-input>
-                </template>
-              </datepicker>
-            </div>
+                  <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">
-              <datepicker menu-class-name="modalfix" v-model="experimenttoDate" :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 outlined dense class="full-width datepicker" :model-value="experimenttoDate != null ? date2Thai(experimenttoDate) : null
-                    " :label="`${'ทดลองปฏิบัติหน้าที่ราชการถึงวันที่ '}`" :rules="[
+          <div class="col-xs-12 col-md-4">
+            <datepicker menu-class-name="modalfix" v-model="experimenttoDate" :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 outlined dense class="full-width datepicker" :model-value="experimenttoDate != null ? date2Thai(experimenttoDate) : null
+                  " :label="`${'ทดลองปฏิบัติหน้าที่ราชการถึงวันที่ '}`" :rules="[
     (val) =>
       !!val ||
       `${'กรุณาเลือกลงวันที่ทดลองปฏิบัติหน้าที่ราชการถึงวันที่ '}`,
   ]">
-                    <template v-slot:prepend>
-                      <q-icon name="event" class="cursor-pointer" style="color: var(--q-primary)">
-                      </q-icon>
-                    </template>
-                  </q-input>
-                </template>
-              </datepicker>
-            </div>
-            <div class="col-md-4"></div>
+                  <template v-slot:prepend>
+                    <q-icon name="event" class="cursor-pointer" style="color: var(--q-primary)">
+                    </q-icon>
+                  </template>
+                </q-input>
+              </template>
+            </datepicker>
+          </div>
+          <div class="col-md-4"></div>
 
           <div class="col-xs-12 col-md-4">
             <selector :class="getClass(true)" outlined dense lazy-rules v-model="chairman"
@@ -1097,7 +1131,9 @@ const getClass = (val: boolean) => {
           typeOrder.commandCode === 'C-PM-12'
           ">
           <div class="col-xs-12 col-md-4">
-            <q-input :class="getClass(true)" outlined dense lazy-rules v-model="committeeOc" :rules="[(val) => !!val || `${'กรุณาเลือกชื่อหน่วยงาน (อนุสนธิคำสั่ง)'}`]" :label="`${'ชื่อหน่วยงาน (อนุสนธิคำสั่ง)'}`" hide-bottom-space />
+            <q-input :class="getClass(true)" outlined dense lazy-rules v-model="committeeOc"
+              :rules="[(val) => !!val || `${'กรุณาเลือกชื่อหน่วยงาน (อนุสนธิคำสั่ง)'}`]"
+              :label="`${'ชื่อหน่วยงาน (อนุสนธิคำสั่ง)'}`" hide-bottom-space />
 
             <!-- <selector :class="getClass(true)" outlined dense lazy-rules v-model="committeeOc"
               :rules="[(val: string) => !!val || `${'กรุณาเลือกหน่วยงาน (อนุสนธิคำสั่ง)'}`]" hide-bottom-space
@@ -1105,7 +1141,9 @@ const getClass = (val: boolean) => {
               :options="committeeOcOption" option-value="id" use-input input-debounce="0" /> -->
           </div>
           <div class="col-xs-12 col-md-4">
-            <q-input :class="getClass(true)" outlined dense lazy-rules v-model="committeeOrder" :rules="[(val) => !!val || `${'กรุณาเลือกอนุสนธิคำสั่งที่'}`]" :label="`${'อนุสนธิคำสั่งที่'}`" hide-bottom-space />
+            <q-input :class="getClass(true)" outlined dense lazy-rules v-model="committeeOrder"
+              :rules="[(val) => !!val || `${'กรุณาเลือกอนุสนธิคำสั่งที่'}`]" :label="`${'อนุสนธิคำสั่งที่'}`"
+              hide-bottom-space />
 
             <!-- <selector :class="getClass(true)" outlined dense lazy-rules v-model="committeeOrder"
               :rules="[(val: string) => !!val || `${'กรุณาเลือกอนุสนธิคำสั่งที่'}`]" hide-bottom-space
@@ -1137,7 +1175,8 @@ const getClass = (val: boolean) => {
         <!-- C-PM-13 -->
         <div class="row col-6 q-col-gutter-x-lg q-col-gutter-y-md" v-if="typeOrder.commandCode === 'C-PM-13'">
           <div class="col-xs-12 col-md-12">
-            <q-input :class="getClass(true)" outlined dense lazy-rules v-model="receiveOc" :rules="[(val) => !!val || `${'กรุณาเลือกชื่อหน่วยงาน'}`]" :label="`${'ชื่อหน่วยงาน'}`" hide-bottom-space />
+            <q-input :class="getClass(true)" outlined dense lazy-rules v-model="receiveOc"
+              :rules="[(val) => !!val || `${'กรุณาเลือกชื่อหน่วยงาน'}`]" :label="`${'ชื่อหน่วยงาน'}`" hide-bottom-space />
 
             <!-- <selector :class="getClass(true)" outlined dense lazy-rules v-model="receiveOc"
               :rules="[(val: string) => !!val || `${'กรุณาเลือกหน่วยงาน'}`]" hide-bottom-space
@@ -1222,6 +1261,8 @@ const getClass = (val: boolean) => {
   </div>
 </template>
 
-<style>.q-field--with-bottom {
+<style>
+.q-field--with-bottom {
   padding-bottom: 0px;
-}</style>
+}
+</style>
diff --git a/src/modules/10_order/components/step/step02.vue b/src/modules/10_order/components/step/step02.vue
index 8a7efbc7c..fb4a8b4e3 100644
--- a/src/modules/10_order/components/step/step02.vue
+++ b/src/modules/10_order/components/step/step02.vue
@@ -114,7 +114,7 @@ const getData = async (id: string) => {
     .get(config.API.personsselectedOrder(id))
     .then((res) => {
       const data = res.data.result;
-      console.log(data);
+      // console.log(data);
       let list: ResponseData[] = [];
       data.map((r: ResponseData) => {
         list.push({
diff --git a/src/modules/10_order/components/step/step03.vue b/src/modules/10_order/components/step/step03.vue
index 290cffccf..1beea1c09 100644
--- a/src/modules/10_order/components/step/step03.vue
+++ b/src/modules/10_order/components/step/step03.vue
@@ -260,7 +260,7 @@ const saveData = async () => {
       .post(config.API.copyOrderPersonsId(id), selectedModal.value)
       .then((res) => {
         //   const data = res.data.result;
-        console.log(res);
+        // console.log(res);
       })
       .catch((e) => {
         messageError($q, e);
diff --git a/src/modules/10_order/components/step/step04.vue b/src/modules/10_order/components/step/step04.vue
index 402c3d72c..6284cf6dd 100644
--- a/src/modules/10_order/components/step/step04.vue
+++ b/src/modules/10_order/components/step/step04.vue
@@ -10,7 +10,7 @@ import http from "@/plugins/http";
 import config from "@/app.config";
 
 const mixin = useCounterMixin();
-const { date2Thai, messageError, showLoader, hideLoader, dialogConfirm } = mixin;
+const { date2Thai, messageError, showLoader, hideLoader, dialogConfirm, success } = mixin;
 const route = useRoute();
 const $q = useQuasar();
 
@@ -26,40 +26,82 @@ const date = ref<Date>(new Date());
 const fileOrder = ref<any>(null);
 const fileTailer = ref<any>(null);
 
-const OrderPDF = ref<string>("");
-const TailerPDF = ref<string>("");
 const OrderPDFUpload = ref<string>("");
 const TailerPDFUpload = ref<string>("");
+
+const orderCoverPdf = ref<string>("");
+const orderCoverDocs = ref<string>("");
+const orderAttachmentPdf = ref<string>("");
+const orderAttachmentXlsx = ref<string>("");
+
 const statusOrder = ref<string>();
 
 const orderId = ref<string>(orderId_params.toString());
 onMounted(async () => {
   if (orderId.value) {
+    fetchReportCover('pdf', orderId.value);
+    fetchReportCover('docx', orderId.value);
+    fetchReportAttachment('pdf', orderId.value);
+    fetchReportAttachment('xlsx', orderId.value);
     fetchAttachment(orderId.value);
     fecthstatusOrder(orderId.value);
   }
 });
 
+const fetchReportCover = async (type: string, orderId: string) => {
+  showLoader();
+  await http
+    .get(config.API.reportOrderCover(type, orderId))
+    .then(async (res) => {
+      if (type == 'pdf') {
+        orderCoverPdf.value = res.data.result;
+        viewPDF(orderCoverPdf.value);
+      } else {
+        orderCoverDocs.value = res.data.result;
+      }
+    })
+    .catch((e) => {
+      // messageError($q, e);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+};
+
+const fetchReportAttachment = async (type: string, orderId: string) => {
+  showLoader();
+  await http
+    .get(config.API.reportOrderAttachment(type, orderId))
+    .then(async (res) => {
+      if (type == 'pdf') {
+        orderAttachmentPdf.value = res.data.result;
+      } else {
+        orderAttachmentXlsx.value = res.data.result;
+      }
+    })
+    .catch((e) => {
+      // messageError($q, e);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+};
+
 const fetchAttachment = async (orderId: string) => {
   showLoader();
   await http
     .get(config.API.attachmentOrder(orderId))
     .then(async (res) => {
       let response = res.data.result;
-      // console.log(response);
       order.value = response.orderNo;
       years.value = Number(response.orderYear);
       if (response.date !== undefined) {
         date.value = response.date;
       }
       if (response.orderFileUrl !== null) {
-        // OrderPDF.value = response.orderFileUrl;
         OrderPDFUpload.value = response.orderFileUrl;
-
-        viewPDF(OrderPDF.value);
       }
       if (response.attachmentFileUrl !== null) {
-        // TailerPDF.value = response.attachmentFileUrl;
         TailerPDFUpload.value = response.attachmentFileUrl;
       }
     })
@@ -70,6 +112,7 @@ const fetchAttachment = async (orderId: string) => {
       hideLoader();
     });
 };
+
 const fecthstatusOrder = async (orderId: string) => {
   await http
     .get(config.API.orderReady(orderId))
@@ -78,7 +121,7 @@ const fecthstatusOrder = async (orderId: string) => {
       statusOrder.value = status.result;
     })
     .catch((e) => {
-      console.log(e);
+      messageError($q, e);
     });
 };
 const viewPDF = async (pdf: string) => {
@@ -104,10 +147,10 @@ const viewPDFUpload = async (pdf: string) => {
 watch(tab, () => {
   // console.log(tab.value);
   if (tab.value === "main") {
-    viewPDF(OrderPDF.value);
+    viewPDF(orderCoverPdf.value);
   }
   if (tab.value === "second") {
-    viewPDF(TailerPDF.value);
+    viewPDF(orderAttachmentPdf.value);
   }
 });
 
@@ -159,6 +202,7 @@ const save = () => {
     });
   }
 };
+
 const putOrderData = async () => {
   const orderData = {
     orderNo: order.value,
@@ -168,10 +212,10 @@ const putOrderData = async () => {
   await http
     .put(config.API.attachmentOrder(orderId.value), orderData)
     .then((res) => {
-      console.log(res);
+      success($q, "บันทึกข้อมูลสำเร็จ");
     })
     .catch((e) => {
-      console.log(e);
+      messageError($q, e);
     });
 };
 
@@ -246,11 +290,11 @@ const viewFileUpload = async (url: string) => {
                 <q-tooltip>ดาวน์โหลด</q-tooltip>
                 <q-menu>
                   <q-list style="min-width: 150px">
-                    <q-item clickable v-close-popup>
+                    <q-item clickable v-close-popup 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>
+                    <q-item clickable v-close-popup 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>
@@ -265,11 +309,11 @@ const viewFileUpload = async (url: string) => {
                 <q-tooltip>ดาวน์โหลด</q-tooltip>
                 <q-menu>
                   <q-list style="min-width: 150px">
-                    <q-item clickable v-close-popup>
+                    <q-item clickable v-close-popup type="a" :href="orderAttachmentPdf" 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>
+                    <q-item clickable v-close-popup type="a" :href="orderAttachmentXlsx" target="_blank">
                       <q-item-section avatar><q-icon color="green-7" name="mdi-file-excel" /></q-item-section>
                       <q-item-section>ไฟล์ .xls</q-item-section>
                     </q-item>
@@ -332,7 +376,8 @@ const viewFileUpload = async (url: string) => {
                         @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-btn type="a" :href="OrderPDFUpload" size="12px" flat dense color="red" icon="mdi-download"
+                        target="_blank">
                         <q-tooltip>ดาวน์โหลดเอกสารแนบท้าย</q-tooltip>
                       </q-btn>
                     </div>
@@ -350,7 +395,8 @@ const viewFileUpload = async (url: string) => {
                         @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-btn type="a" :href="TailerPDFUpload" size="12px" flat dense color="red" icon="mdi-download"
+                        target="_blank">
                         <q-tooltip>ดาวน์โหลดเอกสารแนบท้าย</q-tooltip>
                       </q-btn>
                     </div>