From 6ba4c4a2dc811106e20e6f5d8e4878526e84ef8c Mon Sep 17 00:00:00 2001
From: AnandaTon <125332905+anandaAiemvong@users.noreply.github.com>
Date: Mon, 3 Jul 2023 10:36:56 +0700
Subject: [PATCH 1/4] filterYear

---
 .../OrderPlacement/MainOrderPlacement.vue     |  8 +++--
 src/modules/05_placement/store.ts             | 34 ++++++++++++++++---
 2 files changed, 35 insertions(+), 7 deletions(-)

diff --git a/src/modules/05_placement/components/OrderPlacement/MainOrderPlacement.vue b/src/modules/05_placement/components/OrderPlacement/MainOrderPlacement.vue
index 83047e607..05efb0570 100644
--- a/src/modules/05_placement/components/OrderPlacement/MainOrderPlacement.vue
+++ b/src/modules/05_placement/components/OrderPlacement/MainOrderPlacement.vue
@@ -20,7 +20,7 @@
             :borderless="false"
             :outlined="true"
             :hide-dropdown-icon="false"
-            @update:model-value="searchfiscalyear"
+            @update:model-value="searchFilterTable"
           />
           <div>
             <q-btn size="12px" flat round color="add" icon="mdi-plus">
@@ -698,7 +698,11 @@ const visibleColumns = ref<string[]>([
 
 const searchFilterTable = async () => {
   // console.log('Input value changed:', examTime.value, examType.value, expiredAccount.value);
-  await DataStore.DataUpdateOrder(OrderType.value, OrderStatus.value);
+  await DataStore.DataUpdateOrder(
+    OrderType.value,
+    OrderStatus.value,
+    fiscalyear.value
+  );
   UpdataData.value = DataStore.DataMainUpdateOrder;
 };
 //   UpdataData.value = DataStore.DataMainUpdate;
diff --git a/src/modules/05_placement/store.ts b/src/modules/05_placement/store.ts
index 296a38b78..e143902f5 100644
--- a/src/modules/05_placement/store.ts
+++ b/src/modules/05_placement/store.ts
@@ -222,23 +222,47 @@ export const useOrderPlacementDataStore = defineStore("placementOrder", () => {
   const DataMainOrder = (val: FormOrderPlacementMainData[]) =>
     (DataMainOrigOrder.value = val);
 
-  const DataUpdateOrder = (filter_1: string, filter_2: string) => {
+  const DataUpdateOrder = (
+    filter_1: string,
+    filter_2: string,
+    filterYear: number | null
+  ) => {
     DataMainUpdateOrder.value = [];
 
-    if (filter_1 === "" && filter_2 === "") {
+    if (filter_1 === "" && filter_2 === "" && filterYear === 0) {
       DataMainUpdateOrder.value = DataMainOrigOrder.value;
-    } else if (filter_1 !== "" && filter_2 === "") {
+    } else if (filter_1 !== "" && filter_2 === "" && filterYear === null) {
       DataMainUpdateOrder.value = DataMainOrigOrder.value.filter(
         (item) => item.OrderType === filter_1
       );
-    } else if (filter_1 !== "" && filter_2 !== "") {
+    } else if (filter_1 !== "" && filter_2 !== "" && filterYear === null) {
       DataMainUpdateOrder.value = DataMainOrigOrder.value.filter(
         (item) => item.OrderType === filter_1 && item.OrderStatus === filter_2
       );
-    } else if (filter_1 === "" && filter_2 !== "") {
+    } else if (filter_1 !== "" && filter_2 === "" && filterYear !== null) {
+      DataMainUpdateOrder.value = DataMainOrigOrder.value.filter(
+        (item) => item.OrderType === filter_1 && item.fiscalYear === filterYear
+      );
+    } else if (filter_1 === "" && filter_2 !== "" && filterYear === null) {
       DataMainUpdateOrder.value = DataMainOrigOrder.value.filter(
         (item) => item.OrderStatus === filter_2
       );
+    } else if (filter_1 === "" && filter_2 === "" && filterYear !== null) {
+      DataMainUpdateOrder.value = DataMainOrigOrder.value.filter(
+        (item) => item.fiscalYear === filterYear
+      );
+    } else if (filter_1 === "" && filter_2 !== "" && filterYear !== null) {
+      DataMainUpdateOrder.value = DataMainOrigOrder.value.filter(
+        (item) =>
+          item.OrderStatus === filter_2 && item.fiscalYear === filterYear
+      );
+    } else if (filter_1 !== "" && filter_2 !== "" && filterYear !== null) {
+      DataMainUpdateOrder.value = DataMainOrigOrder.value.filter(
+        (item) =>
+          item.OrderType === filter_1 &&
+          item.OrderStatus === filter_2 &&
+          item.fiscalYear === filterYear
+      );
     }
   };
 

From ec257e0ddffd51901dcb30e0fd46f841dd6ad35b Mon Sep 17 00:00:00 2001
From: AnandaTon <125332905+anandaAiemvong@users.noreply.github.com>
Date: Mon, 3 Jul 2023 12:18:58 +0700
Subject: [PATCH 2/4] =?UTF-8?q?=E0=B9=80=E0=B9=80=E0=B8=81=E0=B9=89?=
 =?UTF-8?q?=E0=B8=9A=E0=B8=B1=E0=B8=84=20filter=20/=20=E0=B9=80=E0=B8=9E?=
 =?UTF-8?q?=E0=B8=B4=E0=B9=88=E0=B8=A1=E0=B8=9F=E0=B8=B4=E0=B8=A5=20OrderT?=
 =?UTF-8?q?ype?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../OrderPlacement/MainOrderPlacement.vue     | 114 ++++++++++--------
 src/modules/05_placement/store.ts             |  12 +-
 2 files changed, 69 insertions(+), 57 deletions(-)

diff --git a/src/modules/05_placement/components/OrderPlacement/MainOrderPlacement.vue b/src/modules/05_placement/components/OrderPlacement/MainOrderPlacement.vue
index 05efb0570..09bc164d9 100644
--- a/src/modules/05_placement/components/OrderPlacement/MainOrderPlacement.vue
+++ b/src/modules/05_placement/components/OrderPlacement/MainOrderPlacement.vue
@@ -161,6 +161,13 @@
                 >
                   {{ props.row.OrderNum }}
                 </q-td>
+                <q-td
+                  key="OrderType"
+                  :props="props"
+                  @click="redirectToPage(props.row.OrderType)"
+                >
+                  {{ props.row.OrderType }}
+                </q-td>
                 <q-td
                   key="OrderDate"
                   :props="props"
@@ -189,7 +196,6 @@
                 >
                   {{ props.row.OrderStatus }}
                 </q-td>
-
                 <q-td auto-width>
                   <q-btn
                     dense
@@ -251,6 +257,16 @@ const textDate = (value: Date) => {
   return dateText(value);
 };
 
+const visibleColumns = ref<string[]>([
+  "Order",
+  "OrderType",
+  "OrderNum",
+  "OrderDate",
+  "OrderBy",
+  "Signer",
+  "OrderStatus",
+]); //ค้นหา คอลัมน์ คอลัมน์ที่แสดง
+
 // หัวตาราง
 const columns = ref<QTableProps["columns"]>([
   {
@@ -274,13 +290,15 @@ const columns = ref<QTableProps["columns"]>([
     style: "font-size: 14px",
   },
   {
-    name: "fiscalYear",
+    name: "OrderType",
     align: "left",
-    label: "ปีงบประมาณ",
-    sortable: true,
-    field: "fiscalYear",
+    label: "ประเภท",
+    sortable: false,
+    field: "OrderType",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
   },
   {
     name: "OrderDate",
@@ -327,15 +345,13 @@ const columns = ref<QTableProps["columns"]>([
       a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
   },
   {
-    name: "OrderType",
+    name: "fiscalYear",
     align: "left",
-    label: "ประเภท",
-    sortable: false,
-    field: "OrderType",
+    label: "ปีงบประมาณ",
+    sortable: true,
+    field: "fiscalYear",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
-    sort: (a: string, b: string) =>
-      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
   },
 ]);
 
@@ -364,9 +380,9 @@ const rows = ref<FormOrderPlacementMainData[]>([
   },
   {
     Order: "คำสั่งแต่งตั้งผู้สอบแข่งขันได้",
-    OrderNum: "1/2565",
-    fiscalYear: 2565,
-    OrderDate: "30 พ.ค. 2565",
+    OrderNum: "1/2564",
+    fiscalYear: 2564,
+    OrderDate: "30 พ.ค. 2564",
     OrderBy: "สำนักงาน กทม.",
     Signer: "นาม สมคิด ยอดใจ ",
     OrderStatus: "บัญชีแนบท้าย",
@@ -374,19 +390,29 @@ const rows = ref<FormOrderPlacementMainData[]>([
   },
   {
     Order: "คำสั่งแต่งตั้งผู้สอบแข่งขันได้",
-    OrderNum: "1/2565",
-    fiscalYear: 2565,
-    OrderDate: "30 พ.ค. 2565",
+    OrderNum: "1/2564",
+    fiscalYear: 2564,
+    OrderDate: "30 พ.ค. 2564",
     OrderBy: "สำนักงาน กทม.",
     Signer: "นาม สมคิด ยอดใจ ",
     OrderStatus: "บัญชีแนบท้าย",
-    OrderType: "คำสั่งบรรจุและแต่งตั้ง",
+    OrderType: "คำสั่งย้าย",
   },
   {
     Order: "คำสั่งแต่งตั้งผู้สอบแข่งขันได้",
-    OrderNum: "1/2565",
-    fiscalYear: 2565,
-    OrderDate: "30 พ.ค. 2565",
+    OrderNum: "1/2564",
+    fiscalYear: 2564,
+    OrderDate: "30 พ.ค. 2564",
+    OrderBy: "สำนักงาน กทม.",
+    Signer: "นาม สมคิด ยอดใจ ",
+    OrderStatus: "ส่งสำเนาคำสั่ง",
+    OrderType: "คำสั่งย้าย",
+  },
+  {
+    Order: "คำสั่งแต่งตั้งผู้สอบแข่งขันได้",
+    OrderNum: "1/2564",
+    fiscalYear: 2564,
+    OrderDate: "30 พ.ค. 2564",
     OrderBy: "สำนักงาน กทม.",
     Signer: "นาม สมคิด ยอดใจ ",
     OrderStatus: "ส่งสำเนาคำสั่ง",
@@ -394,19 +420,9 @@ const rows = ref<FormOrderPlacementMainData[]>([
   },
   {
     Order: "คำสั่งแต่งตั้งผู้สอบแข่งขันได้",
-    OrderNum: "1/2565",
-    fiscalYear: 2565,
-    OrderDate: "30 พ.ค. 2565",
-    OrderBy: "สำนักงาน กทม.",
-    Signer: "นาม สมคิด ยอดใจ ",
-    OrderStatus: "ส่งสำเนาคำสั่ง",
-    OrderType: "คำสั่งบรรจุและแต่งตั้ง",
-  },
-  {
-    Order: "คำสั่งแต่งตั้งผู้สอบแข่งขันได้",
-    OrderNum: "1/2565",
-    fiscalYear: 2565,
-    OrderDate: "30 พ.ค. 2565",
+    OrderNum: "1/2566",
+    fiscalYear: 2566,
+    OrderDate: "30 พ.ค. 2566",
     OrderBy: "สำนักงาน กทม.",
     Signer: "นาม สมคิด ยอดใจ ",
     OrderStatus: "รอลงนาม",
@@ -414,13 +430,13 @@ const rows = ref<FormOrderPlacementMainData[]>([
   },
   {
     Order: "คำสั่งแต่งตั้งผู้สอบแข่งขันได้",
-    OrderNum: "1/2565",
-    fiscalYear: 2565,
-    OrderDate: "30 พ.ค. 2565",
+    OrderNum: "1/2566",
+    fiscalYear: 2566,
+    OrderDate: "30 พ.ค. 2566",
     OrderBy: "สำนักงาน กทม.",
     Signer: "นาม สมคิด ยอดใจ ",
     OrderStatus: "ออกคำสั่งแล้ว",
-    OrderType: "คำสั่งบรรจุและแต่งตั้ง",
+    OrderType: "คำสั่งแต่งตั้ง",
   },
   {
     Order: "คำสั่งแต่งตั้งผู้สอบแข่งขันได้",
@@ -434,19 +450,19 @@ const rows = ref<FormOrderPlacementMainData[]>([
   },
   {
     Order: "คำสั่งแต่งตั้งผู้สอบแข่งขันได้",
-    OrderNum: "1/2565",
-    fiscalYear: 2565,
-    OrderDate: "30 พ.ค. 2565",
+    OrderNum: "1/2566",
+    fiscalYear: 2566,
+    OrderDate: "30 พ.ค. 2566",
     OrderBy: "สำนักงาน กทม.",
     Signer: "นาม สมคิด ยอดใจ ",
     OrderStatus: "ออกคำสั่งแล้ว",
-    OrderType: "คำสั่งบรรจุและแต่งตั้ง",
+    OrderType: "คำสั่งแต่งตั้ง",
   },
   {
     Order: "คำสั่งแต่งตั้งผู้สอบแข่งขันได้",
-    OrderNum: "1/2565",
-    fiscalYear: 2565,
-    OrderDate: "30 พ.ค. 2565",
+    OrderNum: "1/2566",
+    fiscalYear: 2566,
+    OrderDate: "30 พ.ค. 2566",
     OrderBy: "สำนักงาน กทม.",
     Signer: "นาม สมคิด ยอดใจ ",
     OrderStatus: "ออกคำสั่งแล้ว",
@@ -687,14 +703,6 @@ const resetFilter = () => {
 };
 
 const attrs = ref<any>(useAttrs());
-const visibleColumns = ref<string[]>([
-  "Order",
-  "OrderNum",
-  "OrderDate",
-  "OrderBy",
-  "Signer",
-  "OrderStatus",
-]); //ค้นหา คอลัมน์ คอลัมน์ที่แสดง
 
 const searchFilterTable = async () => {
   // console.log('Input value changed:', examTime.value, examType.value, expiredAccount.value);
diff --git a/src/modules/05_placement/store.ts b/src/modules/05_placement/store.ts
index e143902f5..634c46309 100644
--- a/src/modules/05_placement/store.ts
+++ b/src/modules/05_placement/store.ts
@@ -231,7 +231,7 @@ export const useOrderPlacementDataStore = defineStore("placementOrder", () => {
 
     if (filter_1 === "" && filter_2 === "" && filterYear === 0) {
       DataMainUpdateOrder.value = DataMainOrigOrder.value;
-    } else if (filter_1 !== "" && filter_2 === "" && filterYear === null) {
+    } else if (filter_1 !== "" && filter_2 === "" && filterYear === 0) {
       DataMainUpdateOrder.value = DataMainOrigOrder.value.filter(
         (item) => item.OrderType === filter_1
       );
@@ -239,15 +239,15 @@ export const useOrderPlacementDataStore = defineStore("placementOrder", () => {
       DataMainUpdateOrder.value = DataMainOrigOrder.value.filter(
         (item) => item.OrderType === filter_1 && item.OrderStatus === filter_2
       );
-    } else if (filter_1 !== "" && filter_2 === "" && filterYear !== null) {
+    } else if (filter_1 !== "" && filter_2 === "" && filterYear !== 0) {
       DataMainUpdateOrder.value = DataMainOrigOrder.value.filter(
         (item) => item.OrderType === filter_1 && item.fiscalYear === filterYear
       );
-    } else if (filter_1 === "" && filter_2 !== "" && filterYear === null) {
+    } else if (filter_1 === "" && filter_2 !== "" && filterYear === 0) {
       DataMainUpdateOrder.value = DataMainOrigOrder.value.filter(
         (item) => item.OrderStatus === filter_2
       );
-    } else if (filter_1 === "" && filter_2 === "" && filterYear !== null) {
+    } else if (filter_1 === "" && filter_2 === "" && filterYear !== 0) {
       DataMainUpdateOrder.value = DataMainOrigOrder.value.filter(
         (item) => item.fiscalYear === filterYear
       );
@@ -256,6 +256,10 @@ export const useOrderPlacementDataStore = defineStore("placementOrder", () => {
         (item) =>
           item.OrderStatus === filter_2 && item.fiscalYear === filterYear
       );
+    } else if (filter_1 !== "" && filter_2 !== "" && filterYear === 0) {
+      DataMainUpdateOrder.value = DataMainOrigOrder.value.filter(
+        (item) => item.OrderStatus === filter_2 && item.OrderType === filter_1
+      );
     } else if (filter_1 !== "" && filter_2 !== "" && filterYear !== null) {
       DataMainUpdateOrder.value = DataMainOrigOrder.value.filter(
         (item) =>

From c8f682fb38a3fe7ae7d62b3584489a2130a992ed Mon Sep 17 00:00:00 2001
From: AnandaTon <125332905+anandaAiemvong@users.noreply.github.com>
Date: Mon, 3 Jul 2023 17:16:37 +0700
Subject: [PATCH 3/4] =?UTF-8?q?=E0=B8=97=E0=B8=B0=E0=B9=80=E0=B8=9A?=
 =?UTF-8?q?=E0=B8=B5=E0=B8=A2=E0=B8=99=E0=B8=9B=E0=B8=A3=E0=B8=B0=E0=B8=A7?=
 =?UTF-8?q?=E0=B8=B1=E0=B8=95=E0=B8=B4=E0=B8=A5=E0=B8=B9=E0=B8=81=E0=B8=88?=
 =?UTF-8?q?=E0=B9=89=E0=B8=B2=E0=B8=87?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/interface/request/main/main.ts            |  8 ++
 src/modules/08_registryEmployee/router.ts     | 30 +++++++
 src/modules/08_registryEmployee/store.ts      | 83 +++++++++++++++++++
 .../08_registryEmployee/views/Main.vue        |  0
 4 files changed, 121 insertions(+)
 create mode 100644 src/modules/08_registryEmployee/router.ts
 create mode 100644 src/modules/08_registryEmployee/store.ts
 create mode 100644 src/modules/08_registryEmployee/views/Main.vue

diff --git a/src/interface/request/main/main.ts b/src/interface/request/main/main.ts
index 3941c81f6..faf46e4d3 100644
--- a/src/interface/request/main/main.ts
+++ b/src/interface/request/main/main.ts
@@ -211,6 +211,14 @@ const menuList = readonly<any[]>([
     path: "insignia",
     role: "insignia",
   },
+  {
+    key: 9,
+    icon: "mdi-medal-outline",
+    activeIcon: "mdi-medal",
+    label: "ทะเบียนประวัติลูกจ้าง",
+    path: "registryEmployee",
+    role: "registryEmployee",
+  },
 ]);
 
 const tabList = readonly<tabType[]>([
diff --git a/src/modules/08_registryEmployee/router.ts b/src/modules/08_registryEmployee/router.ts
new file mode 100644
index 000000000..f65e37a06
--- /dev/null
+++ b/src/modules/08_registryEmployee/router.ts
@@ -0,0 +1,30 @@
+/**
+ * Router ระบบทะเบียนประวัติ}6d0hk' (Registry)
+ */
+
+const Main = () => import("@/modules/08_registryEmployee/views/Main.vue");
+const Detail = () =>
+  import("@/modules/08_registryEmployee/components/Profile.vue");
+
+export default [
+  {
+    path: "/registryEmployee",
+    name: "registryEmployee",
+    component: Main,
+    meta: {
+      Auth: true,
+      Key: [9],
+      Role: "registryEmployee",
+    },
+  },
+  {
+    path: "/registryEmployee/:id",
+    name: "registryEmployeeDetail",
+    component: Detail,
+    meta: {
+      Auth: true,
+      Key: [9],
+      Role: "registryEmployee",
+    },
+  },
+];
diff --git a/src/modules/08_registryEmployee/store.ts b/src/modules/08_registryEmployee/store.ts
new file mode 100644
index 000000000..8b69ec17a
--- /dev/null
+++ b/src/modules/08_registryEmployee/store.ts
@@ -0,0 +1,83 @@
+import { ref, computed } from "vue";
+import { defineStore } from "pinia";
+
+export const useProfileDataStore = defineStore("profile", () => {
+  interface profile {
+    main: { columns: String[] };
+    education: { columns: String[] };
+    oldName: { columns: String[] };
+    certicate: { columns: String[] };
+    train: { columns: String[] };
+    insignia: { columns: String[] };
+    coined: { columns: String[] };
+    assessment: { columns: String[] };
+    salary: { columns: String[] };
+    discipline: { columns: String[] };
+    leave: { columns: String[] };
+    talent: { columns: String[] };
+    work: { columns: String[] };
+    record: { columns: String[] };
+    other: { columns: String[] };
+    document: { columns: String[] };
+  }
+
+  const birthDate = ref<Date>(new Date());
+  const retireText = ref<string | null>(null);
+  const changeRetireText = (val: string | null) => {
+    retireText.value = val;
+  };
+  const changeBirth = (val: Date) => {
+    birthDate.value = val;
+  };
+  const profileData = ref<profile>({
+    main: { columns: [] },
+    education: { columns: [] },
+    oldName: { columns: [] },
+    certicate: { columns: [] },
+    train: { columns: [] },
+    insignia: { columns: [] },
+    coined: { columns: [] },
+    assessment: { columns: [] },
+    salary: { columns: [] },
+    discipline: { columns: [] },
+    leave: { columns: [] },
+    talent: { columns: [] },
+    work: { columns: [] },
+    record: { columns: [] },
+    other: { columns: [] },
+    document: { columns: [] },
+  });
+
+  const changeProfileColumns = (system: String, val: String[]) => {
+    if (system == "main") profileData.value.main.columns = val;
+    if (system == "education") profileData.value.education.columns = val;
+    if (system == "oldName") profileData.value.oldName.columns = val;
+    if (system == "certicate") profileData.value.certicate.columns = val;
+    if (system == "train") profileData.value.train.columns = val;
+    if (system == "insignia") profileData.value.insignia.columns = val;
+    if (system == "coined") profileData.value.coined.columns = val;
+    if (system == "assessment") profileData.value.assessment.columns = val;
+    if (system == "salary") profileData.value.salary.columns = val;
+    if (system == "discipline") profileData.value.discipline.columns = val;
+    if (system == "leave") profileData.value.leave.columns = val;
+    if (system == "talent") profileData.value.talent.columns = val;
+    if (system == "work") profileData.value.work.columns = val;
+    if (system == "record") profileData.value.record.columns = val;
+    if (system == "other") profileData.value.other.columns = val;
+    if (system == "document") profileData.value.document.columns = val;
+    localStorage.setItem("profile", JSON.stringify(profileData.value));
+  };
+
+  if (localStorage.getItem("profile") !== null) {
+    profileData.value = JSON.parse(localStorage.getItem("profile") || "{}");
+  }
+
+  return {
+    profileData,
+    changeProfileColumns,
+    birthDate,
+    changeBirth,
+    retireText,
+    changeRetireText,
+  };
+});
diff --git a/src/modules/08_registryEmployee/views/Main.vue b/src/modules/08_registryEmployee/views/Main.vue
new file mode 100644
index 000000000..e69de29bb

From 17782c32b8e6189bb3e724a0cb30f8d7e39c4501 Mon Sep 17 00:00:00 2001
From: Thanit Konmek <thanit@frappet.com>
Date: Mon, 3 Jul 2023 17:21:04 +0700
Subject: [PATCH 4/4] =?UTF-8?q?=E0=B9=81=E0=B8=81=E0=B9=89=E0=B9=84?=
 =?UTF-8?q?=E0=B8=82=20pdf?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/OrderPlacement/step/step01.vue | 10 +---
 .../components/OrderPlacement/step/step02.vue |  2 +-
 .../components/OrderPlacement/step/step03.vue |  4 +-
 .../components/OrderPlacement/step/step04.vue | 57 ++++++++++++-------
 4 files changed, 41 insertions(+), 32 deletions(-)

diff --git a/src/modules/05_placement/components/OrderPlacement/step/step01.vue b/src/modules/05_placement/components/OrderPlacement/step/step01.vue
index e272fa47f..80d650866 100644
--- a/src/modules/05_placement/components/OrderPlacement/step/step01.vue
+++ b/src/modules/05_placement/components/OrderPlacement/step/step01.vue
@@ -370,12 +370,8 @@
     </div>
     <q-separator />
     <div class="flex justify-end q-pa-sm q-gutter-sm">
-      <q-btn
-        unelevated
-        label="บันทึก"
-        color="public"
-        @click="next"
-      ><!-- icon="mdi-content-save-outline"
+      <q-btn unelevated label="บันทึก" color="public" @click="next"
+        ><!-- icon="mdi-content-save-outline"
         <q-tooltip>บันทึก</q-tooltip> -->
       </q-btn>
       <!-- <q-btn flat round color="primary" icon="chevron_left" @click="previous">
@@ -389,7 +385,7 @@
 </template>
 <script setup lang="ts">
 import { ref } from "vue";
-import type { DataOption } from "@/modules/05_placement/interface/index/Main.ts";
+import type { DataOption } from "@/modules/05_placement/interface/index/Main";
 import { useCounterMixin } from "@/stores/mixin";
 import type { QForm } from "quasar";
 
diff --git a/src/modules/05_placement/components/OrderPlacement/step/step02.vue b/src/modules/05_placement/components/OrderPlacement/step/step02.vue
index 4328510a6..a8a6f79c1 100644
--- a/src/modules/05_placement/components/OrderPlacement/step/step02.vue
+++ b/src/modules/05_placement/components/OrderPlacement/step/step02.vue
@@ -325,7 +325,7 @@ const selectData = (row: any) => {};
 
 const refresh = () => {};
 
-const paginationLabel = (start: string, end: string, total: string) => {
+const paginationLabel = (start: number, end: number, total: number) => {
   //   if (props.paging == true)
   //     return " " + start + " ใน " + end + " จากจำนวน " + total + " รายการ";
   //   else
diff --git a/src/modules/05_placement/components/OrderPlacement/step/step03.vue b/src/modules/05_placement/components/OrderPlacement/step/step03.vue
index 66da2ed48..3f8dd9f8b 100644
--- a/src/modules/05_placement/components/OrderPlacement/step/step03.vue
+++ b/src/modules/05_placement/components/OrderPlacement/step/step03.vue
@@ -334,7 +334,7 @@ import { useQuasar } from "quasar";
 import { useCounterMixin } from "@/stores/mixin";
 import DialogHeader from "@/modules/04_registry/components/DialogHeader.vue";
 import type { QInput, QForm } from "quasar";
-import type { treeTab } from "@/modules/05_placement/interface/index/Main.ts";
+import type { treeTab } from "@/modules/05_placement/interface/index/Main";
 import http from "@/plugins/http";
 import config from "@/app.config";
 
@@ -614,7 +614,7 @@ onMounted(async () => {
   await nodeTree();
 });
 
-const paginationLabel = (start: string, end: string, total: string) => {
+const paginationLabel = (start: number, end: number, total: number) => {
   //   if (props.paging == true)
   //     return " " + start + " ใน " + end + " จากจำนวน " + total + " รายการ";
   //   else
diff --git a/src/modules/05_placement/components/OrderPlacement/step/step04.vue b/src/modules/05_placement/components/OrderPlacement/step/step04.vue
index 6f1b50480..e10dbd022 100644
--- a/src/modules/05_placement/components/OrderPlacement/step/step04.vue
+++ b/src/modules/05_placement/components/OrderPlacement/step/step04.vue
@@ -83,13 +83,8 @@
                 </q-btn>
               </div>
               <div class="pdfWidth">
-                <!-- <VuePDF
-                  ref="vuePDFRef"
-                  :pdf="pdfData"
-                  :page="page"
-                  fit-parent
-                /> -->
-                <VuePdf :key="page" :src="pdfSrc" :page="page" />
+                <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-py-sm row"
@@ -198,27 +193,42 @@
   </div>
 </template>
 <script setup lang="ts">
-import { ref, onMounted } from "vue";
-// import { VuePDF, usePDF } from "@tato30/vue-pdf";
-// import type { PDFDocumentLoadingTask } from "@tato30/vue-pdf";
-import { VuePdf, createLoadingTask } from "vue3-pdfjs/esm";
-import { VuePdfPropsType } from "vue3-pdfjs/components/vue-pdf/vue-pdf-props"; // Prop type definitions can also be imported
-import { PDFDocumentProxy } from "pdfjs-dist/types/src/display/api";
+import { ref, onMounted, onUnmounted } from "vue";
+import { VuePDF, usePDF } from "@tato30/vue-pdf";
+import type { PDFDocumentLoadingTask } from "pdfjs-dist/types/src/display/api";
 import type { QForm } from "quasar";
 
-onMounted(() => {
-  const loadingTask = createLoadingTask(pdfSrc.value);
-  loadingTask.promise.then((pdf: PDFDocumentProxy) => {
-    numOfPages.value = pdf.numPages;
+onUnmounted(() => {
+  window.removeEventListener("resize", (e: any) => {
+    myEventHandler(e);
   });
 });
 
-const pdfSrc = ref<VuePdfPropsType["src"]>(
-  "https://raw.githubusercontent.com/mozilla/pdf.js/ba2edeae/web/compressed.tracemonkey-pldi-09.pdf"
-);
-const numOfPages = ref<number>(0);
+onMounted(async () => {
+  window.addEventListener("resize", (e: any) => {
+    myEventHandler(e);
+  });
 
+  const pdfData = usePDF(
+    "https://raw.githubusercontent.com/mozilla/pdf.js/ba2edeae/web/compressed.tracemonkey-pldi-09.pdf"
+  );
+
+  console.log("pdfData.pages.value", pdfData);
+  console.log("pdfData.pages.value", pdfData.pages);
+  console.log("pdfData.pages.value", pdfData.pages.value);
+});
+
+const myEventHandler = (e: any) => {
+  console.log("e", e.target.innerWidth);
+  //   if (vuePDFRef !== null) {
+  //     vuePDFRef.value.reload();
+  //   }
+};
+
+const pdfSrc = ref<PDFDocumentLoadingTask | undefined>();
+const numOfPages = ref<number>(0);
 const page = ref<number>(1);
+const vuePDFRef = ref<any>(null);
 
 const myForm = ref<QForm | null>(null);
 
@@ -242,7 +252,10 @@ const fileOrder = ref<any>(null);
 const fileTailer = ref<any>(null);
 
 const onchangePage = (val: any) => {
-  console.log(val);
+  //   console.log(val);
+  if (vuePDFRef !== null) {
+    vuePDFRef.value.reload();
+  }
 };
 
 const save = () => {