From cf7a653160eba1ad4325e963868d5048a2946353 Mon Sep 17 00:00:00 2001
From: setthawutttty <stw.ttty@gmail.com>
Date: Fri, 21 Jul 2023 15:08:37 +0700
Subject: [PATCH] =?UTF-8?q?copy=20=E0=B8=AD=E0=B8=AD=E0=B8=81=E0=B8=84?=
 =?UTF-8?q?=E0=B8=B3=E0=B8=AA=E0=B8=B1=E0=B9=88=E0=B8=87=20=3D>=20/resign-?=
 =?UTF-8?q?order?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/OrderPlacement/ResignOrder.vue | 791 ++++++++++++++++++
 src/modules/05_placement/router.ts            |  12 +
 2 files changed, 803 insertions(+)
 create mode 100644 src/modules/05_placement/components/OrderPlacement/ResignOrder.vue

diff --git a/src/modules/05_placement/components/OrderPlacement/ResignOrder.vue b/src/modules/05_placement/components/OrderPlacement/ResignOrder.vue
new file mode 100644
index 000000000..d4ac841a2
--- /dev/null
+++ b/src/modules/05_placement/components/OrderPlacement/ResignOrder.vue
@@ -0,0 +1,791 @@
+<template>
+    <div class="toptitle text-dark col-12 row items-center">คำสั่งลาออก</div>
+    <div>
+      <q-card flat bordered class="col-12 q-mt-sm q-pa-md">
+        <div class="row q-col-gutter-sm">
+          <div class="row col-12 q-col-gutter-sm">
+            <q-select
+              class="col-xs-12 col-sm-3 col-md-2"
+              v-model="fiscalyear"
+              label="ปีงบประมาณ"
+              dense
+              emit-value
+              map-options
+              :options="fiscalyearOP"
+              option-value="id"
+              option-label="name"
+              lazy-rules
+              hide-bottom-space
+              :readonly="false"
+              :borderless="false"
+              :outlined="true"
+              :hide-dropdown-icon="false"
+              @update:model-value="searchFilterTable"
+            />
+            <div>
+              <q-btn
+                size="12px"
+                flat
+                round
+                color="add"
+                icon="mdi-plus"
+                @click="clickAdd"
+              >
+                <q-tooltip>เพิ่มข้อมูล</q-tooltip>
+                <!-- <q-menu>
+                  <q-list style="min-width: 100px">
+                    <q-item clickable @click="clickAdd">
+                      <q-item-section>ลายเซ็นชื่อ (ออฟไลน์)</q-item-section>
+                    </q-item>
+                    <q-item clickable v-close-popup disable>
+                      <q-item-section
+                        >ลายเซ็นอิเล็กทรอนิกส์ (ออนไลน์)</q-item-section
+                      >
+                    </q-item>
+                  </q-list>
+                </q-menu> -->
+              </q-btn>
+            </div>
+            <q-space />
+  
+            <q-input
+              class="col-xs-12 col-sm-3 col-md-2"
+              standout
+              dense
+              v-model="filterKeyword"
+              ref="filterRef"
+              outlined
+              debounce="300"
+              placeholder="ค้นหา"
+            >
+              <template v-slot:append>
+                <q-icon v-if="filterKeyword == ''" name="search" />
+                <q-icon
+                  v-if="filterKeyword !== ''"
+                  name="clear"
+                  class="cursor-pointer"
+                  @click="resetFilter"
+                />
+              </template>
+            </q-input>
+  
+            <q-select
+              v-model="visibleColumns"
+              multiple
+              outlined
+              dense
+              options-dense
+              :display-value="$q.lang.table.columns"
+              emit-value
+              map-options
+              :options="columns"
+              option-value="name"
+              options-cover
+              style="min-width: 150px"
+              class="col-xs-12 col-sm-3 col-md-2"
+            />
+          </div>
+          <div class="col-12">
+            <q-card bordered class="col-12 filter-card q-pa-sm">
+              <div class="row col-12 q-col-gutter-sm">
+                <q-select
+                  class="col-xs-12 col-sm-3 col-md-2"
+                  v-model="OrderType"
+                  label="ประเภท"
+                  dense
+                  emit-value
+                  map-options
+                  option-label="name"
+                  :options="OrderTypeOption"
+                  option-value="id"
+                  lazy-rules
+                  hide-bottom-space
+                  :readonly="false"
+                  :borderless="false"
+                  :outlined="true"
+                  :hide-dropdown-icon="false"
+                  @update:model-value="searchFilterTable"
+                />
+                <q-select
+                  class="col-xs-12 col-sm-3 col-md-2"
+                  v-model="OrderStatus"
+                  label="สถานะ"
+                  dense
+                  emit-value
+                  map-options
+                  option-label="name"
+                  :options="OrderStatusOption"
+                  option-value="id"
+                  lazy-rules
+                  hide-bottom-space
+                  :readonly="false"
+                  :borderless="false"
+                  :outlined="true"
+                  :hide-dropdown-icon="false"
+                  @update:model-value="searchFilterTable"
+                />
+              </div>
+            </q-card>
+          </div>
+          <div class="col-12">
+            <q-table
+              ref="table"
+              :columns="columns"
+              :rows="UpdataData"
+              :filter="filterKeyword"
+              row-key="Order"
+              flat
+              bordered
+              :paging="true"
+              dense
+              class="custom-header-table"
+              v-bind="attrs"
+              :visible-columns="visibleColumns"
+              :pagination-label="paginationLabel"
+              v-model:pagination="pagination"
+            >
+              <template v-slot:header="props">
+                <q-tr :props="props">
+                  <q-th v-for="col in props.cols" :key="col.name" :props="props">
+                    <span class="text-weight-medium">{{ col.label }}</span>
+                  </q-th>
+                  <q-th auto-width />
+                </q-tr>
+              </template>
+              <template v-slot:body="props">
+                <q-tr :props="props" class="cursor-pointer">
+                  <q-td
+                    key="Order"
+                    :props="props"
+                    @click="redirectToPage(props.row.Order)"
+                  >
+                    {{ props.row.Order }}
+                  </q-td>
+                  <q-td
+                    key="OrderNum"
+                    :props="props"
+                    @click="redirectToPage(props.row.Order)"
+                  >
+                    {{ 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"
+                    @click="redirectToPage(props.row.Order)"
+                  >
+                    {{ props.row.OrderDate }}
+                  </q-td>
+                  <q-td
+                    key="OrderBy"
+                    :props="props"
+                    @click="redirectToPage(props.row.Order)"
+                  >
+                    {{ props.row.OrderBy }}
+                  </q-td>
+                  <q-td
+                    key="Signer"
+                    :props="props"
+                    @click="redirectToPage(props.row.Order)"
+                  >
+                    {{ props.row.Signer }}
+                  </q-td>
+                  <q-td
+                    key="OrderStatus"
+                    :props="props"
+                    @click="redirectToPage(props.row.Order)"
+                  >
+                    {{ props.row.OrderStatus }}
+                  </q-td>
+                  <q-td auto-width>
+                    <q-btn
+                      dense
+                      size="12px"
+                      flat
+                      round
+                      color="red"
+                      @click="clickDelete(props.row.id)"
+                      icon="mdi-delete"
+                    >
+                      <q-tooltip>ลบข้อมูล</q-tooltip>
+                    </q-btn>
+                  </q-td>
+                </q-tr>
+              </template>
+              <template v-slot:pagination="scope">
+                <q-pagination
+                  v-model="pagination.page"
+                  active-color="primary"
+                  color="dark"
+                  :max="scope.pagesNumber"
+                  :max-pages="5"
+                  size="sm"
+                  boundary-links
+                  direction-links
+                ></q-pagination>
+              </template>
+            </q-table>
+          </div>
+        </div>
+      </q-card>
+    </div>
+  </template>
+  
+  <script setup lang="ts">
+  import { onMounted, reactive, ref, useAttrs, computed } from "vue";
+  import type { QTableProps } from "quasar";
+  import type { FormOrderPlacementMainData } from "@/modules/05_placement/interface/request/Main";
+  import type { DataOption } from "@/modules/05_placement/interface/index/Main";
+  import { useCounterMixin } from "@/stores/mixin";
+  import { useOrderPlacementDataStore } from "@/modules/05_placement/store";
+  import router from "@/router";
+  import { useQuasar } from "quasar";
+  
+  const $q = useQuasar(); //ใช้ noti quasar
+  const DataStore = useOrderPlacementDataStore();
+  const pagination = ref({
+    sortBy: "desc",
+    descending: false,
+    page: 1,
+    rowsPerPage: 10,
+  });
+  
+  const mixin = useCounterMixin();
+  const { dateText } = mixin;
+  
+  // แปลงเวลา ค.ศ ให้เป็น พ.ศ
+  const textDate = (value: Date) => {
+    return dateText(value);
+  };
+  
+  const visibleColumns = ref<string[]>([
+    "Order",
+    "OrderType",
+    "OrderNum",
+    "OrderDate",
+    "OrderBy",
+    "Signer",
+    "OrderStatus",
+  ]); //ค้นหา คอลัมน์ คอลัมน์ที่แสดง
+  
+  // หัวตาราง
+  const columns = ref<QTableProps["columns"]>([
+    {
+      name: "Order",
+      align: "left",
+      label: "คำสั่ง",
+      sortable: true,
+      field: "Order",
+      headerStyle: "font-size: 14px",
+      style: "font-size: 14px",
+      sort: (a: string, b: string) =>
+        a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+    },
+    {
+      name: "OrderNum",
+      align: "left",
+      label: "เลขที่คำสั่ง",
+      sortable: true,
+      field: "OrderNum",
+      headerStyle: "font-size: 14px",
+      style: "font-size: 14px",
+    },
+    {
+      name: "OrderType",
+      align: "left",
+      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",
+      align: "left",
+      label: "สั่ง ณ วันที่/วันที่คำสั่งมีผล",
+      sortable: true,
+      field: "OrderDate",
+      headerStyle: "font-size: 14px",
+      style: "font-size: 14px",
+      sort: (a: string, b: string) =>
+        a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+    },
+    {
+      name: "OrderBy",
+      align: "left",
+      label: "คำสั่งโดย",
+      sortable: true,
+      field: "OrderBy",
+      headerStyle: "font-size: 14px",
+      style: "font-size: 14px",
+      sort: (a: string, b: string) =>
+        a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+    },
+    {
+      name: "Signer",
+      align: "left",
+      label: "ผู้ลงนาม",
+      sortable: false,
+      field: "Signer",
+      headerStyle: "font-size: 14px",
+      style: "font-size: 14px",
+      sort: (a: string, b: string) =>
+        a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+    },
+    {
+      name: "OrderStatus",
+      align: "center",
+      label: "สถานะคำสั่ง",
+      sortable: false,
+      field: "OrderStatus",
+      headerStyle: "font-size: 14px",
+      style: "font-size: 14px",
+      sort: (a: string, b: string) =>
+        a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+    },
+    {
+      name: "fiscalYear",
+      align: "left",
+      label: "ปีงบประมาณ",
+      sortable: true,
+      field: "fiscalYear",
+      headerStyle: "font-size: 14px",
+      style: "font-size: 14px",
+    },
+  ]);
+  
+  // ข้อมูลตาราง (จำลอง)
+  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",
+      OrderBy: "สำนักงาน กทม.",
+      Signer: "นาม สมคิด ยอดใจ ",
+      OrderStatus: "จัดทำร่างคำสั่ง",
+      OrderType: "คำสั่งบรรจุและแต่งตั้ง",
+    },
+    {
+      Order: "คำสั่งแต่งตั้งผู้สอบแข่งขันได้",
+      OrderNum: "1/2564",
+      fiscalYear: 2564,
+      OrderDate: "30 พ.ค. 2564",
+      OrderBy: "สำนักงาน กทม.",
+      Signer: "นาม สมคิด ยอดใจ ",
+      OrderStatus: "บัญชีแนบท้าย",
+      OrderType: "คำสั่งบรรจุและแต่งตั้ง",
+    },
+    {
+      Order: "คำสั่งแต่งตั้งผู้สอบแข่งขันได้",
+      OrderNum: "1/2564",
+      fiscalYear: 2564,
+      OrderDate: "30 พ.ค. 2564",
+      OrderBy: "สำนักงาน กทม.",
+      Signer: "นาม สมคิด ยอดใจ ",
+      OrderStatus: "บัญชีแนบท้าย",
+      OrderType: "คำสั่งย้าย",
+    },
+    {
+      Order: "คำสั่งแต่งตั้งผู้สอบแข่งขันได้",
+      OrderNum: "1/2564",
+      fiscalYear: 2564,
+      OrderDate: "30 พ.ค. 2564",
+      OrderBy: "สำนักงาน กทม.",
+      Signer: "นาม สมคิด ยอดใจ ",
+      OrderStatus: "ส่งสำเนาคำสั่ง",
+      OrderType: "คำสั่งย้าย",
+    },
+    {
+      Order: "คำสั่งแต่งตั้งผู้สอบแข่งขันได้",
+      OrderNum: "1/2564",
+      fiscalYear: 2564,
+      OrderDate: "30 พ.ค. 2564",
+      OrderBy: "สำนักงาน กทม.",
+      Signer: "นาม สมคิด ยอดใจ ",
+      OrderStatus: "ส่งสำเนาคำสั่ง",
+      OrderType: "คำสั่งบรรจุและแต่งตั้ง",
+    },
+    {
+      Order: "คำสั่งแต่งตั้งผู้สอบแข่งขันได้",
+      OrderNum: "1/2566",
+      fiscalYear: 2566,
+      OrderDate: "30 พ.ค. 2566",
+      OrderBy: "สำนักงาน กทม.",
+      Signer: "นาม สมคิด ยอดใจ ",
+      OrderStatus: "รอลงนาม",
+      OrderType: "คำสั่งบรรจุและแต่งตั้ง",
+    },
+    {
+      Order: "คำสั่งแต่งตั้งผู้สอบแข่งขันได้",
+      OrderNum: "1/2566",
+      fiscalYear: 2566,
+      OrderDate: "30 พ.ค. 2566",
+      OrderBy: "สำนักงาน กทม.",
+      Signer: "นาม สมคิด ยอดใจ ",
+      OrderStatus: "ออกคำสั่งแล้ว",
+      OrderType: "คำสั่งแต่งตั้ง",
+    },
+    {
+      Order: "คำสั่งแต่งตั้งผู้สอบแข่งขันได้",
+      OrderNum: "1/2565",
+      fiscalYear: 2565,
+      OrderDate: "30 พ.ค. 2565",
+      OrderBy: "สำนักงาน กทม.",
+      Signer: "นาม สมคิด ยอดใจ ",
+      OrderStatus: "ออกคำสั่งแล้ว",
+      OrderType: "คำสั่งบรรจุและแต่งตั้ง",
+    },
+    {
+      Order: "คำสั่งแต่งตั้งผู้สอบแข่งขันได้",
+      OrderNum: "1/2566",
+      fiscalYear: 2566,
+      OrderDate: "30 พ.ค. 2566",
+      OrderBy: "สำนักงาน กทม.",
+      Signer: "นาม สมคิด ยอดใจ ",
+      OrderStatus: "ออกคำสั่งแล้ว",
+      OrderType: "คำสั่งแต่งตั้ง",
+    },
+    {
+      Order: "คำสั่งแต่งตั้งผู้สอบแข่งขันได้",
+      OrderNum: "1/2566",
+      fiscalYear: 2566,
+      OrderDate: "30 พ.ค. 2566",
+      OrderBy: "สำนักงาน กทม.",
+      Signer: "นาม สมคิด ยอดใจ ",
+      OrderStatus: "ออกคำสั่งแล้ว",
+      OrderType: "คำสั่งย้าย",
+    },
+  
+    {
+      Order: "คำสั่งแต่งตั้งผู้สอบแข่งขันได้",
+      OrderNum: "1/2564",
+      fiscalYear: 2564,
+      OrderDate: "30 พ.ค. 2564",
+      OrderBy: "สำนักงาน กทม.",
+      Signer: "นาม สมคิด ยอดใจ ",
+      OrderStatus: "ออกคำสั่งแล้ว",
+      OrderType: "คำสั่งแต่งตั้ง",
+    },
+  
+    {
+      Order: "คำสั่งแต่งตั้งผู้สอบแข่งขันได้",
+      OrderNum: "1/2566",
+      fiscalYear: 2566,
+      OrderDate: "30 พ.ค. 2566",
+      OrderBy: "สำนักงาน กทม.",
+      Signer: "นาม สมคิด ยอดใจ ",
+      OrderStatus: "ออกคำสั่งแล้ว",
+      OrderType: "คำสั่งแต่งตั้ง",
+    },
+  ]);
+  // const OrderStatusOption = [
+  //   "ทั้งหมด",
+  //   "ยังไม่ได้บรรจุ",
+  //   "บรรจุแล้ว",
+  //   "ยังไม่ได้ออกคำสั่ง",
+  // ];
+  
+  let OriginalData = ref<FormOrderPlacementMainData[]>([]);
+  let UpdataData = ref<FormOrderPlacementMainData[]>([]);
+  
+  onMounted(async () => {
+    await OriginalDataFetch();
+    fiscalYearFilter();
+    searchFilterTable();
+    OrderStatusFilter();
+    OrderTypeFilter();
+  });
+  
+  const OriginalDataFetch = async () => {
+    // API
+    // await http
+    //   .get(config.API.// ตัวอย่าง)
+    //   .then((res: any) => {
+    //   })
+    //   .catch((e: any) => {
+    //     messageError($q, e);
+    //   })
+    //   .finally(async () => {
+    //   });
+    await DataStore.DataMainOrder(rows.value);
+    OriginalData.value = await DataStore.DataMainOrigOrder;
+    UpdataData.value = OriginalData.value;
+  };
+  
+  // ดูรายการหน้าต่อไป
+  const redirectToPage = (id?: number) => {
+    // router.push({ name: "placementDetail" });
+    router.push(`/placement/order/detail`);
+  };
+  
+  const clickDelete = (id: string) => {
+    $q.dialog({
+      title: "ยืนยันการลบข้อมูล",
+      message: "ต้องการลบข้อมูลนี้ใช่หรือไม่?",
+      cancel: {
+        flat: true,
+        color: "negative",
+      },
+      persistent: true,
+    })
+      .onOk(async () => {
+        //   await deleteData(id);
+      })
+      .onCancel(() => {})
+      .onDismiss(() => {});
+  };
+  
+  // const deleteData = async (id: string) => {
+  //   loaderPage(true);
+  //   await http
+  //     .delete(config.API.orderReplace(id))
+  //     .then((res) => {
+  //       success($q, "ลบข้อมูลสำเร็จ");
+  //     })
+  //     .catch((e) => {
+  //       messageError($q, e);
+  //     })
+  //     .finally(async () => {
+  //       loaderPage(false);
+  //       await fetchData();
+  //     });
+  // };
+  
+  const clickAdd = () => {
+    router.push({ name: "OrderplacementDetail" });
+  };
+  
+  // const viewDetail = (id: string, status: string) => {
+  //   if (status == "checkPayment") {
+  //     router.push(`${route.fullPath}/payment/${id}`);
+  //   } else {
+  //     router.push(`${route.fullPath}/profile/${id}`);
+  //   }
+  // };
+  
+  // เลือกปีงบประมาณ
+  const fiscalyear = ref<number | null>(0);
+  const fiscalyearOP = reactive<DataOption[]>([{ id: 0, name: "ทั้งหมด" }]);
+  const addedfiscalYearValues: number[] = [];
+  const fiscalYearFilter = async () => {
+    // API
+    // await http
+    //   .get(config.API.// ตัวอย่าง)
+    //   .then((res: any) => {
+    //    DataStore.DataMainYearSet(rows.value);
+    //    fiscalyearOP.value = DataStore.DataMainYearGet;
+    //   })
+    //   .catch((e: any) => {
+    //     messageError($q, e);
+    //   })
+    //   .finally(async () => {
+    //   });
+    for (let data of OriginalData.value) {
+      const year = data.fiscalYear;
+      console.log(year);
+  
+      if (fiscalyear.value === null || year > fiscalyear.value) {
+        fiscalyear.value = year;
+      }
+  
+      if (!addedfiscalYearValues.includes(year)) {
+        fiscalyearOP.push({ id: year, name: year.toString() });
+        addedfiscalYearValues.push(year);
+      }
+    }
+  };
+  
+  const OrderType = ref<string>("");
+  const OrderTypeOption = reactive<DataOption[]>([{ id: 0, name: "ทั้งหมด" }]);
+  const addedOrderTypeValues: string[] = [];
+  const OrderTypeFilter = async () => {
+    // API
+    // await http
+    //   .get(config.API.// ตัวอย่าง)
+    //   .then((res: any) => {
+    //    DataStore.DataMainYearSet(rows.value);
+    //    fiscalyearOP.value = DataStore.DataMainYearGet;
+    //   })
+    //   .catch((e: any) => {
+    //     messageError($q, e);
+    //   })
+    //   .finally(async () => {
+    //   });
+    for (let data of OriginalData.value) {
+      const OrderTypeValue = data.OrderType;
+      console.log(OrderTypeValue);
+  
+      // if (OrderTypeValue === null || OrderType > OrderTypeValue) {
+      //   OrderTypeValue = OrderType;
+      // }
+      if (!addedOrderTypeValues.includes(OrderTypeValue)) {
+        OrderTypeOption.push({
+          // id: OrderTypeValue ?? 0,
+          id: OrderTypeOption.length,
+          name: OrderTypeValue,
+        });
+        addedOrderTypeValues.push(OrderTypeValue);
+      }
+      // if (!addedOrderTypeValues.includes(OrderTypeValue)) {
+      //   OrderTypeOption.push({
+      //     id: OrderTypeValue,
+      //     name: OrderTypeValue.toString(),
+      //   });
+      //   addedOrderTypeValues.push(OrderTypeValue);
+      // }
+    }
+  };
+  const OrderStatus = ref<string>("");
+  const OrderStatusText = ref<FormOrderPlacementMainData[]>(
+    DataStore.DataMainOrigOrder
+  );
+  const OrderStatusOption = reactive<DataOption[]>([{ id: 1, name: "ทั้งหมด" }]);
+  const addedOrderStatusValues: string[] = [];
+  const OrderStatusFilter = async () => {
+    // API
+    // await http
+    //   .get(config.API.// ตัวอย่าง)
+    //   .then((res: any) => {
+    //    DataStore.DataMainYearSet(rows.value);
+    //    fiscalyearOP.value = DataStore.DataMainYearGet;
+    //   })
+    //   .catch((e: any) => {
+    //     messageError($q, e);
+    //   })
+    //   .finally(async () => {
+    //   });
+    for (let data of OriginalData.value) {
+      const OrderStatusValue = data.OrderStatus;
+      console.log(OrderStatusValue);
+  
+      if (
+        OrderStatusValue === null ||
+        parseInt(OrderStatusValue) > parseInt(OrderStatusValue)
+      ) {
+        OrderStatus.value = OrderStatusValue;
+      }
+  
+      if (!addedOrderStatusValues.includes(OrderStatusValue)) {
+        OrderStatusOption.push({
+          // id: OrderStatusValue,
+          id: OrderStatusOption.length,
+          name: OrderStatusValue,
+        });
+        addedOrderStatusValues.push(OrderStatusValue);
+      }
+    }
+  };
+  
+  // เลือกปีงบประมาณตาม API
+  const searchfiscalyear = () => {
+    console.log("Input value changed:", fiscalyear.value);
+    // API
+    // await http
+    //   .get(config.API.// ตัวอย่าง)
+    //   .then((res: any) => {
+    //   })
+    //   .catch((e: any) => {
+    //     messageError($q, e);
+    //   })
+    //   .finally(async () => {
+    //   });
+  };
+  
+  // ค้นหาในตาราง
+  const filterKeyword = ref<string>("");
+  const filterRef = ref<any>(null);
+  const resetFilter = () => {
+    filterKeyword.value = "";
+    filterRef.value.focus();
+  };
+  
+  const attrs = ref<any>(useAttrs());
+  
+  const searchFilterTable = async () => {
+    // console.log('Input value changed:', examTime.value, examType.value, expiredAccount.value);
+    await DataStore.DataUpdateOrder(
+      OrderType.value,
+      OrderStatus.value,
+      fiscalyear.value
+    );
+    UpdataData.value = DataStore.DataMainUpdateOrder;
+  };
+  //   UpdataData.value = DataStore.DataMainUpdate;
+  // console.log("Input value changed:", OrderStatus.value, OrderType.value);
+  
+  const paging = ref<boolean>(true);
+  const paginationLabel = (start: string, end: string, total: string) => {
+    if (paging.value == true) return " " + start + "-" + end + " ใน " + total;
+    else return start + "-" + end + " ใน " + total;
+  };
+  </script>
+  
+  <style lang="scss" scope>
+  .filter-card {
+    background-color: #f1f1f1b0;
+  }
+  
+  .toggle-expired-account {
+    font-size: 12px;
+    font-weight: 400;
+    font-size: 15px;
+    line-height: 150%;
+    color: #35373c;
+  }
+  
+  .icon-color {
+    color: #4154b3;
+  }
+  
+  .custom-header-table {
+    max-height: 64vh;
+  
+    .q-table tr:nth-child(odd) td {
+      background: white;
+    }
+  
+    .q-table tr:nth-child(even) td {
+      background: #f8f8f8;
+    }
+  
+    .q-table thead tr {
+      background: #ecebeb;
+    }
+  
+    .q-table thead tr th {
+      position: sticky;
+      z-index: 1;
+    }
+  
+    /* this will be the loading indicator */
+    .q-table thead tr:last-child th {
+      /* height of all previous header rows */
+      top: 48px;
+    }
+  
+    .q-table thead tr:first-child th {
+      top: 0;
+    }
+  }
+  </style>
+  
\ No newline at end of file
diff --git a/src/modules/05_placement/router.ts b/src/modules/05_placement/router.ts
index 8da059631..8861854ec 100644
--- a/src/modules/05_placement/router.ts
+++ b/src/modules/05_placement/router.ts
@@ -33,6 +33,8 @@ const probationWorkAdd = () =>
   import("@/modules/05_placement/components/probation/MainDetail.vue");
   const probationWorkAdd2 = () =>
   import("@/modules/05_placement/components/probation/AddWork.vue");
+  const resignOrder = () =>
+  import("@/modules/05_placement/components/OrderPlacement/ResignOrder.vue");
 export default [
   {
     path: "/placement",
@@ -153,5 +155,15 @@ export default [
       Key: [6.3],
       Role: "placement",
     },
+  },  
+  {
+    path: "/placement/resign-order",
+    name: "ResignOrderplacement",
+    component: resignOrder,
+    meta: {
+      Auth: true,
+      Key: [6.2],
+      Role: "placement",
+    },
   },
 ];