From d2c6837a86d491eb9aed460adacd70b3ff0d5af4 Mon Sep 17 00:00:00 2001
From: "DESKTOP-1R2VSQH\\Lenovo ThinkPad E490" <nicey2t1096@gmail.com>
Date: Mon, 18 Dec 2023 18:12:38 +0700
Subject: [PATCH] =?UTF-8?q?=E0=B8=AD=E0=B8=AD=E0=B8=81=E0=B8=84=E0=B8=B3?=
 =?UTF-8?q?=E0=B8=AA=E0=B8=B1=E0=B9=88=E0=B8=87=E0=B8=A5=E0=B8=87=E0=B9=82?=
 =?UTF-8?q?=E0=B8=97=E0=B8=A9=E0=B8=97=E0=B8=B2=E0=B8=87=E0=B8=A7=E0=B8=B4?=
 =?UTF-8?q?=E0=B8=99=E0=B8=B1=E0=B8=A2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/modules/10_order/components/Detail.vue    |   2 +-
 .../components/9_Order/MainPage.vue           | 591 +++++++++++++++---
 .../components/9_Order/TableOrder.vue         | 104 ++-
 .../11_discipline/interface/response/order.ts |  48 +-
 src/modules/11_discipline/router.ts           |  14 +-
 src/modules/11_discipline/store/OrderStore.ts | 110 +++-
 6 files changed, 699 insertions(+), 170 deletions(-)

diff --git a/src/modules/10_order/components/Detail.vue b/src/modules/10_order/components/Detail.vue
index ee0574808..f9bad1bd8 100644
--- a/src/modules/10_order/components/Detail.vue
+++ b/src/modules/10_order/components/Detail.vue
@@ -88,7 +88,7 @@ onMounted(() => {
       flat
       color="primary"
       class="q-mr-sm"
-      @click="router.push('/order'), destroyLocalStorage()"
+      @click="router.go(-1), destroyLocalStorage()"
     />
     ออกคำสั่ง
   </div>
diff --git a/src/modules/11_discipline/components/9_Order/MainPage.vue b/src/modules/11_discipline/components/9_Order/MainPage.vue
index ea54f4e37..a75b6ffcb 100644
--- a/src/modules/11_discipline/components/9_Order/MainPage.vue
+++ b/src/modules/11_discipline/components/9_Order/MainPage.vue
@@ -1,113 +1,512 @@
 <script setup lang="ts">
-import { ref, onMounted } from "vue";
-import { useRouter } from "vue-router";
-import type { DataList, DataListRes } from "../../interface/response/order";
+import { onMounted, reactive, ref, useAttrs } from "vue";
+import router from "@/router";
+import { useQuasar } from "quasar";
+import http from "@/plugins/http";
+import config from "@/app.config";
+
+import type { QTableProps } from "quasar";
+import type { FormOrderPlacementMainData } from "@/modules/10_order/interface/request/Main";
+import type {
+  DataOption,
+  DataOption1,
+} from "@/modules/10_order/interface/index/Main";
+
+import PopupHistory from "@/modules/10_order/components/PopupHistory.vue";
+import TableOrder from "@/modules/11_discipline/components/9_Order/TableOrder.vue";
 
 import { useOrderStore } from "@/modules/11_discipline/store/OrderStore";
-import tableOrder from "@/modules/11_discipline/components/9_Order/TableOrder.vue";
 
-const router = useRouter();
-const OrderStore = useOrderStore();
-const { fetchOrder } = OrderStore; // function จาก stores
-const filterTable = ref<string>("");
+import { useCounterMixin } from "@/stores/mixin";
+import { useOrderPlacementDataStore } from "@/modules/10_order/store";
 
-/** เรียกรายการคำสั่ง จาก API */
-async function fetchListOrder() {
-  const listData: DataListRes[] = [
-    {
-      subject: "ทุจริตในหน้าที่",
-      ordernumber: "1/2556",
-      dateOrder: new Date("2023-12-01"),
-      orderby: "สำนักงานคณพกรรมการข้าราชการกรุงเทพฯ",
-      signer: "นางศิรินภา คงน้อย",
-      statusorder: "เสร็จสิ้นแล้ว",
-    },
-    {
-      subject: "ทุจริตในหน้าที่",
-      ordernumber: "4/2556",
-      dateOrder: new Date("2023-12-01"),
-      orderby: "สำนักงานคณพกรรมการข้าราชการกรุงเทพฯ",
-      signer: "นางศิรินภา คงน้อย",
-      statusorder: "เสร็จสิ้นแล้ว",
-    },
-    {
-      subject: "ทุจริตในหน้าที่",
-      ordernumber: "2/2556",
-      dateOrder: new Date("2023-12-01"),
-      orderby: "สำนักงานคณพกรรมการข้าราชการกรุงเทพฯ",
-      signer: "นางศิรินภา คงน้อย",
-      statusorder: "เสร็จสิ้นแล้ว",
-    },
-  ];
-  await fetchOrder(listData); // ส่งข้อมูลไปยัง stores
-}
+const $q = useQuasar(); //ใช้ noti quasar
+const mixin = useCounterMixin();
+const DataStore = useOrderPlacementDataStore();
 
-/** redirect ไปยังการเพิ่มออกคำสั่งลงโทษทางวินัย */
-function redirectToPageadd() {
-  router.push(`/discipline-order/add`);
-}
+const stroe = useOrderStore();
+const { showLoader, hideLoader, messageError, date2Thai } = mixin;
+
+const commandCodes = ref<string[]>([
+  "C-PM-19",
+  "C-PM-20",
+  "C-PM-25",
+  "C-PM-26",
+  "C-PM-27",
+  "C-PM-28",
+  "C-PM-29",
+  "C-PM-30",
+  "C-PM-31",
+  "C-PM-32",
+]);
+
+// คอลัมน์ของตาราง
+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, b) => parseInt(a) - parseInt(b),
+  },
+  {
+    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: true,
+    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: true,
+    field: "OrderStatus",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+]);
 
-/** โหลดข้อมูลเมื่อเข้าหน้านี้ */
 onMounted(async () => {
-  await fetchListOrder();
+  await fiscalYearFilter();
+  await OrderStatusFilter();
+  await OrderTypeFilter();
+  await fetchOrderlist();
 });
+
+async function fetchOrderlist() {
+  showLoader();
+  await http
+    .get(config.API.listOrder())
+    .then((res: any) => {
+      const data = res.data.result;
+      const typeid = OrderTypeOption.value.map((e) => e.id);
+
+      const filterListOrder = data.filter((e: any) =>
+        typeid.includes(e.orderTypeValue)
+      );
+
+      stroe.fetchOrder(filterListOrder);
+    })
+    .catch((e: any) => {
+      messageError($q, e);
+    })
+    .finally(async () => {
+      hideLoader();
+    });
+}
+
+// redirect ไปยัง step ปัจจุบัน
+const redirectToPage = (id?: string, status?: string) => {
+  let step = 1;
+  switch (status) {
+    case "จัดทำร่างคำสั่ง":
+      step = 1;
+      break;
+    case "บัญชีแนบท้าย":
+      step = 2;
+      break;
+    case "เลือกผู้ได้รับสำเนาคำสั่ง":
+      step = 3;
+      break;
+    default:
+      step = 4;
+      break;
+  }
+  router.push(`/order/detail/${id}?step=${step}`);
+};
+
+// สร้างคำสั่งใหม่
+const clickAdd = () => {
+  router.push({ name: "disciplineOrderAdd" });
+};
+
+// รายการข้อมูลปีงบประมาณ
+const fiscalyear = ref<number | null>(0);
+const fiscalyearOP = ref<any>([{ id: 0, name: "ทั้งหมด" }]);
+const fiscalyearFilter1 = ref<any>([]);
+const fiscalYearFilter = async () => {
+  await http.get(config.API.yearOptionsOrder()).then((res) => {
+    const response = res.data.result;
+    fiscalyearOP.value = [{ id: 0, name: "ทั้งหมด" }];
+    response.map((r: any) => {
+      fiscalyearOP.value.push({ id: r.id, name: r.name.toString() });
+    });
+
+    fiscalyearFilter1.value = [{ id: 0, name: "ทั้งหมด" }];
+    response.map((r: any) => {
+      fiscalyearFilter1.value.push({
+        id: r.id,
+        name: r.name.toString(),
+      });
+    });
+  });
+};
+
+// รายการข้อมูลประเภทคำสั่ง
+const OrderType = ref<string>("");
+const OrderTypeFilter1 = ref<any>([]);
+const OrderTypeOption = ref<DataOption1[]>([{ id: "", name: "ทั้งหมด" }]);
+
+const OrderTypeFilter = async () => {
+  await http
+    .get(config.API.typeOrder())
+    .then((res) => {
+      const response = res.data.result;
+      const filterRes = response.filter((e: any) =>
+        commandCodes.value.includes(e.commandCode)
+      );
+
+      OrderTypeOption.value = [{ id: "", name: "ทั้งหมด" }];
+      OrderTypeOption.value.push(...filterRes);
+
+      OrderTypeFilter1.value = [{ id: "", name: "ทั้งหมด" }];
+      OrderTypeFilter1.value.push(...filterRes);
+    })
+    .catch((e) => {
+      messageError($q, e);
+    });
+};
+
+// รายการข้อมูลสถานะคำสั่ง
+const OrderStatus = ref<string>("ทั้งหมด");
+const OrderStatusOption = ref<DataOption1[]>([
+  { id: "ทั้งหมด", name: "ทั้งหมด" },
+]);
+const OrderStatusFilter1 = ref<any>([]);
+const addedOrderStatusValues: string[] = [];
+const OrderStatusFilter = async () => {
+  for (let data of stroe.mainData) {
+    const OrderStatusValue = data.orderStatusName;
+
+    if (
+      OrderStatusValue === null ||
+      parseInt(OrderStatusValue) > parseInt(OrderStatusValue)
+    ) {
+      OrderStatus.value = OrderStatusValue;
+    }
+
+    if (!addedOrderStatusValues.includes(OrderStatusValue)) {
+      OrderStatusOption.value = [{ id: "ทั้งหมด", name: "ทั้งหมด" }];
+      OrderStatusOption.value.push({
+        // id: OrderStatusValue,
+        id: OrderStatusOption.value.length.toString(),
+        name: OrderStatusValue,
+      });
+      OrderStatusFilter1.value = [{ id: "ทั้งหมด", name: "ทั้งหมด" }];
+      OrderStatusFilter1.value.push({
+        // id: OrderStatusValue,
+        id: OrderStatusFilter1.value.length.toString(),
+        name: OrderStatusValue,
+      });
+      addedOrderStatusValues.push(OrderStatusValue);
+    }
+  }
+};
+
+// ค้นหาในตาราง
+const filterKeyword = ref<string>("");
+const filterRef = ref<any>(null);
+const resetFilter = () => {
+  filterKeyword.value = "";
+  filterRef.value.focus();
+};
+
+const searchFilterTable = async () => {
+  stroe.filterListOrder(OrderType.value, OrderStatus.value, fiscalyear.value);
+};
+
+const filterSelector = (val: any, update: Function, refData: string) => {
+  switch (refData) {
+    case "fiscalyearOP":
+      update(() => {
+        fiscalyearOP.value = fiscalyearFilter1.value.filter(
+          (v: any) => v.name.indexOf(val) > -1
+        );
+      });
+      break;
+    case "OrderTypeOption":
+      update(() => {
+        OrderTypeOption.value = OrderTypeFilter1.value.filter(
+          (v: any) => v.name.indexOf(val) > -1
+        );
+      });
+      break;
+    case "OrderStatusOption":
+      update(() => {
+        OrderStatusOption.value = OrderStatusFilter1.value.filter(
+          (v: any) => v.name.indexOf(val) > -1
+        );
+      });
+      break;
+    default:
+      break;
+  }
+};
 </script>
 
 <template>
   <div class="toptitle text-dark col-12 row items-center">
-    รายการออกคำสั่งลงโทษทางวินัย
+    ออกคำสั่งลงโทษทางวินัย
   </div>
-  <q-card flat bordered class="col-12 q-mt-sm q-pa-md">
-    <div class="row col-12 q-col-gutter-sm q-mb-sm">
-      <div>
-        <q-btn
-          for="buttonAddDisciplineOrder"
-          flat
-          size="12px"
-          round
-          color="primary"
-          icon="mdi-plus"
-          @click="redirectToPageadd()"
-        >
-          <q-tooltip>เพิ่มรายการออกคำสั่งลงโทษทางวินัย </q-tooltip>
-        </q-btn>
+  <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-"
+            v-model="fiscalyear"
+            label="ปีงบประมาณ"
+            dense
+            emit-value
+            map-options
+            :options="fiscalyearOP"
+            option-value="id"
+            option-label="name"
+            lazy-rules
+            use-input
+            hide-bottom-space
+            :readonly="false"
+            :borderless="false"
+            :outlined="true"
+            :hide-dropdown-icon="false"
+            @update:model-value="searchFilterTable"
+            @filter="(inputValue:any,
+                      doneFn:Function) => filterSelector(inputValue, doneFn,'fiscalyearOP'
+                      ) "
+          >
+            <template v-slot:no-option>
+              <q-item>
+                <q-item-section class="text-grey"> ไม่มีข้อมูล </q-item-section>
+              </q-item>
+            </template>
+          </q-select>
+          <!-- use-input -->
+          <div>
+            <q-btn
+              size="12px"
+              flat
+              round
+              color="add"
+              icon="mdi-plus"
+              @click="clickAdd"
+            >
+              <q-tooltip>เพิ่มข้อมูล</q-tooltip>
+            </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="stroe.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">
+              <div class="col-xs-12 col-sm-3 col-md-4">
+                <q-select
+                  v-model="OrderType"
+                  label="ประเภท"
+                  dense
+                  emit-value
+                  map-options
+                  option-label="name"
+                  :options="OrderTypeOption"
+                  option-value="id"
+                  lazy-rules
+                  use-input
+                  hide-bottom-space
+                  :readonly="false"
+                  :borderless="false"
+                  :outlined="true"
+                  :hide-dropdown-icon="false"
+                  @update:model-value="searchFilterTable"
+                  @filter="(inputValue:any,
+                    doneFn:Function) => filterSelector(inputValue, doneFn,'OrderTypeOption'
+                    ) "
+                >
+                  <template v-slot:no-option>
+                    <q-item>
+                      <q-item-section class="text-grey">
+                        ไม่มีข้อมูล
+                      </q-item-section>
+                    </q-item>
+                  </template>
+                </q-select>
+              </div>
+              <div class="col-xs-12 col-sm-3 col-md-3">
+                <q-select
+                  v-model="OrderStatus"
+                  label="สถานะ"
+                  dense
+                  emit-value
+                  map-options
+                  option-label="name"
+                  :options="OrderStatusOption"
+                  option-value="name"
+                  lazy-rules
+                  use-input
+                  hide-bottom-space
+                  :readonly="false"
+                  :borderless="false"
+                  :outlined="true"
+                  :hide-dropdown-icon="false"
+                  @update:model-value="searchFilterTable"
+                  @filter="(inputValue:any,
+                      doneFn:Function) => filterSelector(inputValue, doneFn,'OrderStatusOption'
+                      ) "
+                >
+                  <template v-slot:no-option>
+                    <q-item>
+                      <q-item-section class="text-grey">
+                        ไม่มีข้อมูล
+                      </q-item-section>
+                    </q-item>
+                  </template>
+                </q-select>
+              </div>
+              <q-space />
+              <div><PopupHistory :OrderTypeOption="OrderTypeOption" /></div>
+            </div>
+          </q-card>
+        </div>
+        <div class="col-12">
+          <TableOrder :filterTable="filterKeyword" />
+        </div>
       </div>
-      <q-space />
-
-      <q-input
-        class="col-xs-12 col-sm-3 col-md-2"
-        for="inputFilterTable"
-        dense
-        outlined
-        v-model="filterTable"
-        label="ค้นหา"
-      >
-        <template v-slot:append>
-          <q-icon name="search" />
-        </template>
-      </q-input>
-
-      <q-select
-        for="selectVisibleColumns"
-        class="col-xs-12 col-sm-3 col-md-2"
-        v-model="OrderStore.visibleColumns"
-        multiple
-        outlined
-        dense
-        options-dense
-        :display-value="$q.lang.table.columns"
-        emit-value
-        map-options
-        :options="OrderStore.columns"
-        option-value="name"
-        options-cover
-      />
-    </div>
-    
-    <div class="col-12">
-      <tableOrder :filterTable="filterTable" />
-    </div>
-  </q-card>
+    </q-card>
+  </div>
 </template>
 
-<style scoped></style>
+<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>
diff --git a/src/modules/11_discipline/components/9_Order/TableOrder.vue b/src/modules/11_discipline/components/9_Order/TableOrder.vue
index af1b6247a..046e16740 100644
--- a/src/modules/11_discipline/components/9_Order/TableOrder.vue
+++ b/src/modules/11_discipline/components/9_Order/TableOrder.vue
@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import { ref, onMounted } from "vue";
+import router from "@/router";
 /** importType */
 import type { QTableProps } from "quasar";
 /** importStroe */
@@ -18,69 +19,89 @@ const props = defineProps({
 /** ข้อมูลที่เเสดงใน คอลัม */
 const columns = ref<QTableProps["columns"]>([
   {
-    name: "subject",
+    name: "orderName",
     align: "left",
-    label: "เรื่อง",
+    label: "คำสั่ง",
     sortable: true,
-    field: "subject",
+    field: "orderName",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
   },
   {
-    name: "ordernumber",
+    name: "orderNo",
     align: "left",
     label: "เลขที่คำสั่ง",
     sortable: true,
-    field: "ordernumber",
+    field: "orderNo",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
   },
   {
-    name: "dateOrder",
+    name: "orderTypeName",
+    align: "left",
+    label: "ประเภท",
+    sortable: false,
+    field: "orderTypeName",
+    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: "dateOrder",
+    field: "orderDate",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
+    sort: (a, b) => parseInt(a) - parseInt(b),
   },
   {
-    name: "orderby",
+    name: "orderByOrganization",
     align: "left",
     label: "คำสั่งโดย",
     sortable: true,
-    field: "orderby",
+    field: "orderByOrganization",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
   },
   {
-    name: "signer",
+    name: "signatoryBy",
     align: "left",
     label: "ผู้ลงนาม",
     sortable: true,
-    field: "signer",
+    field: "signatoryBy",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
   },
   {
-    name: "statusorder",
-    align: "left",
-    label: "สถานะของคำสั่ง",
+    name: "orderStatusName",
+    align: "center",
+    label: "สถานะคำสั่ง",
     sortable: true,
-    field: "statusorder",
+    field: "orderStatusName",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
   },
 ]);
-
 /** หัวตาราง */
 const visibleColumns = ref<string[]>([
-  "subject",
-  "ordernumber",
-  "dateOrder",
-  "orderby",
-  "signer",
-  "statusorder",
+  "orderName",
+  "orderNo",
+  "orderTypeName",
+  "orderDate",
+  "orderByOrganization",
+  "signatoryBy",
+  "orderStatusName",
 ]);
 
 /** โหลดข้อมูลเมื่อเข้าหน้านี้ */
@@ -95,13 +116,33 @@ const pagination = ref({
   page: 1,
   rowsPerPage: 10,
 });
+
+// redirect ไปยัง step ปัจจุบัน
+const redirectToPage = (id?: string, status?: string) => {
+  let step = 1;
+  switch (status) {
+    case "จัดทำร่างคำสั่ง":
+      step = 1;
+      break;
+    case "บัญชีแนบท้าย":
+      step = 2;
+      break;
+    case "เลือกผู้ได้รับสำเนาคำสั่ง":
+      step = 3;
+      break;
+    default:
+      step = 4;
+      break;
+  }
+  router.push(`/discipline-order/detail/${id}?step=${step}`);
+};
 </script>
 
 <template>
   <d-table
     for="table"
     ref="table"
-    :columns="columns"
+    :columns="OrderStore.columns"
     :rows="OrderStore.rows"
     :filter="props.filterTable"
     row-key="subject"
@@ -120,13 +161,16 @@ const pagination = ref({
       </q-tr>
     </template>
     <template v-slot:body="props">
-      <q-tr :props="props" class="cursor-pointer" style="height: 40px">
-        <q-td v-for="col in props.cols" :key="col.name" :props="props">
-          <div>
-            {{ col.value }}
-          </div>
-        </q-td>
-      </q-tr>
+      <q-td
+        v-for="col in props.cols"
+        :key="col.name"
+        :props="props"
+        @click="redirectToPage(props.row.orderId, props.row.OrderStatus)"
+      >
+        <div>
+          {{ col.value }}
+        </div>
+      </q-td>
     </template>
   </d-table>
 </template>
diff --git a/src/modules/11_discipline/interface/response/order.ts b/src/modules/11_discipline/interface/response/order.ts
index b0957c850..26b27a7c5 100644
--- a/src/modules/11_discipline/interface/response/order.ts
+++ b/src/modules/11_discipline/interface/response/order.ts
@@ -1,25 +1,35 @@
 interface DataList {
-    subject: string
-    ordernumber: string
-    dateOrder: string | null;
-    orderby: string
-    signer: string
-    statusorder: string
-
+  fiscalYear: string;
+  orderBy: string;
+  orderById: string;
+  orderByOrganization: string;
+  orderDate: string | null;
+  orderId: string;
+  orderName: string;
+  orderNo: string;
+  orderStatusName: string;
+  orderStatusValue: string;
+  orderTypeName: string;
+  orderTypeValue: string;
+  signatoryBy: string;
+  signatoryPosition: string;
 }
 
 interface DataListRes {
-    subject: string
-    ordernumber: string
-    dateOrder: Date
-    orderby: string
-    signer: string
-    statusorder: string
+  fiscalYear: string;
+  orderBy: string;
+  orderById: string;
+  orderByOrganization: string;
+  orderDate: Date;
+  orderId: string;
+  orderName: string;
+  orderNo: string;
+  orderStatusName: string;
+  orderStatusValue: string;
+  orderTypeName: string;
+  orderTypeValue: string;
+  signatoryBy: string;
+  signatoryPosition: string;
 }
 
-
-
-export type {
-    DataList,
-    DataListRes
-}
\ No newline at end of file
+export type { DataList, DataListRes };
diff --git a/src/modules/11_discipline/router.ts b/src/modules/11_discipline/router.ts
index 7d05cc5fe..544eae904 100644
--- a/src/modules/11_discipline/router.ts
+++ b/src/modules/11_discipline/router.ts
@@ -73,6 +73,8 @@ const appealComplainAdd = () =>
   import("@/modules/11_discipline/components/8_AppealComplain/AddPage.vue");
 const appealComplainEdit = () =>
   import("@/modules/11_discipline/components/8_AppealComplain/EditPage.vue");
+
+const DetailPage = () => import("@/modules/10_order/components/Detail.vue");
 export default [
   {
     path: "/discipline/complaints",
@@ -329,7 +331,17 @@ export default [
   {
     path: "/discipline-order/add",
     name: "disciplineOrderAdd",
-    component: orderPage,
+    component: DetailPage,
+    meta: {
+      Auth: true,
+      Key: [11.4],
+      Role: "discipline",
+    },
+  },
+  {
+    path: "/discipline-order/detail/:orderid",
+    name: "disciplineOrderDatail",
+    component: DetailPage,
     meta: {
       Auth: true,
       Key: [11.4],
diff --git a/src/modules/11_discipline/store/OrderStore.ts b/src/modules/11_discipline/store/OrderStore.ts
index c0278653a..daef1bf0e 100644
--- a/src/modules/11_discipline/store/OrderStore.ts
+++ b/src/modules/11_discipline/store/OrderStore.ts
@@ -4,30 +4,94 @@ import { ref } from "vue";
 import { useCounterMixin } from "@/stores/mixin";
 
 import type { QTableProps } from "quasar";
-import type { DataList, DataListRes } from "@/modules/11_discipline/interface/response/order"
+import type {
+  DataList,
+  DataListRes,
+} from "@/modules/11_discipline/interface/response/order";
 
-const mixin = useCounterMixin()
-const { date2Thai } = mixin
+const mixin = useCounterMixin();
+const { date2Thai } = mixin;
 export const useOrderStore = defineStore("DisciplineOrder", () => {
-    const rows = ref<DataList[]>([])
-    const columns = ref<QTableProps["columns"]>([]);
-    const visibleColumns = ref<string[]>([]);
-    async function fetchOrder(data: DataListRes[]) {
-        let datalist: DataList[] = data.map((e: DataListRes) => ({
-            subject: e.subject,
-            ordernumber: e.ordernumber,
-            dateOrder: date2Thai(e.dateOrder),
-            orderby: e.orderby,
-            signer: e.signer,
-            statusorder: e.statusorder
-        }))
-        rows.value = datalist
-    }
+  const columns = ref<QTableProps["columns"]>([]);
+  const visibleColumns = ref<string[]>([]);
 
-    return {
-        rows,
-        columns,
-        visibleColumns,
-        fetchOrder
+  const mainData = ref<DataList[]>([]);
+  const rows = ref<DataList[]>([]);
+
+  async function fetchOrder(data: DataListRes[]) {
+    let datalist: DataList[] = data.map((e: DataListRes) => ({
+      fiscalYear: e.fiscalYear,
+      orderBy: e.orderBy,
+      orderById: e.orderById,
+      orderByOrganization: e.orderByOrganization,
+      orderDate: e.orderDate ? date2Thai(e.orderDate) : "",
+      orderId: e.orderId,
+      orderName: e.orderName,
+      orderNo: e.orderNo,
+      orderStatusName: e.orderStatusName,
+      orderStatusValue: e.orderStatusValue,
+      orderTypeName: e.orderTypeName,
+      orderTypeValue: e.orderTypeValue,
+      signatoryBy: e.signatoryBy,
+      signatoryPosition: e.signatoryPosition,
+    }));
+    mainData.value = datalist;
+    filterListOrder("", "ทั้งหมด", 0);
+  }
+
+  function filterListOrder(
+    filter_1: string,
+    filter_2: string,
+    filterYear: number | null
+  ) {
+    rows.value = [];
+    if (filter_1 === "" && filter_2 === "ทั้งหมด" && filterYear === 0) {
+      rows.value = mainData.value;
+    } else if (filter_1 !== "" && filter_2 === "ทั้งหมด" && filterYear === 0) {
+      rows.value = mainData.value.filter(
+        (item) => item.orderTypeValue === filter_1
+      );
+    } else if (filter_1 === "" && filter_2 !== "ทั้งหมด" && filterYear === 0) {
+      rows.value = mainData.value.filter(
+        (item) => item.orderStatusName === filter_2
+      );
+    } else if (filter_1 === "" && filter_2 === "ทั้งหมด" && filterYear !== 0) {
+      rows.value = mainData.value.filter(
+        (item) => Number(item.fiscalYear) === filterYear
+      );
+    } else if (filter_1 !== "" && filter_2 !== "ทั้งหมด" && filterYear === 0) {
+      rows.value = mainData.value.filter(
+        (item) =>
+          item.orderTypeValue === filter_1 && item.orderStatusName === filter_2
+      );
+    } else if (filter_1 !== "" && filter_2 === "ทั้งหมด" && filterYear !== 0) {
+      rows.value = mainData.value.filter(
+        (item) =>
+          item.orderTypeValue === filter_1 &&
+          Number(item.fiscalYear) === filterYear
+      );
+    } else if (filter_1 === "" && filter_2 !== "ทั้งหมด" && filterYear !== 0) {
+      rows.value = mainData.value.filter(
+        (item) =>
+          item.orderStatusName === filter_2 &&
+          Number(item.fiscalYear) === filterYear
+      );
+    } else if (filter_1 !== "" && filter_2 !== "ทั้งหมด" && filterYear !== 0) {
+      rows.value = mainData.value.filter(
+        (item) =>
+          item.orderTypeValue === filter_1 &&
+          item.orderStatusName === filter_2 &&
+          Number(item.fiscalYear) === filterYear
+      );
     }
-})
\ No newline at end of file
+  }
+
+  return {
+    rows,
+    mainData,
+    columns,
+    visibleColumns,
+    fetchOrder,
+    filterListOrder,
+  };
+});