ปรับวินัย

src/modules/11_discipline/components/!4_Order/MainPage.vue

@@ -0,0 +1,113 @@
+<script setup lang="ts">
+import { ref, onMounted } from "vue";
+import { useRouter } from "vue-router";
+import type { DataList, DataListRes } from "../../interface/response/order";
+
+import { useOrderStore } from "@/modules/11_discipline/store/OrderStore";
+import tableOrder from "@/modules/11_discipline/components/4_Order/TableOrder.vue";
+
+const router = useRouter();
+const OrderStore = useOrderStore();
+const { fetchOrder } = OrderStore; // function จาก stores
+const filterTable = ref<string>("");
+
+/** เรียกรายการคำสั่ง จาก 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
+}
+
+/** redirect ไปยังการเพิ่มออกคำสั่งลงโทษทางวินัย */
+function redirectToPageadd() {
+  router.push(`/discipline-order/add`);
+}
+
+/** โหลดข้อมูลเมื่อเข้าหน้านี้ */
+onMounted(async () => {
+  await fetchListOrder();
+});
+</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-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>
+</template>
+
+<style scoped></style>