From 3482ec0ae43b4a2086e8fb83bd85ee033242eaa4 Mon Sep 17 00:00:00 2001
From: waruneeta <warunee.auy@gmail.com>
Date: Fri, 24 Nov 2023 16:52:10 +0700
Subject: [PATCH] =?UTF-8?q?=E0=B8=9B=E0=B8=A3=E0=B8=B1=E0=B8=9A=E0=B8=A7?=
 =?UTF-8?q?=E0=B8=B4=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/interface/request/main/main.ts            |  17 +-
 .../{4_Order => !4_Order}/MainPage.vue        |   0
 .../{4_Order => !4_Order}/OrderPage.vue       |   0
 .../{4_Order => !4_Order}/Step01.vue          |   0
 .../{4_Order => !4_Order}/Step02.vue          |   0
 .../{4_Order => !4_Order}/Step03.vue          |   0
 .../{4_Order => !4_Order}/TableOrder.vue      |   0
 .../3_InvestigateDisciplinary/EditPage.vue    |   5 +-
 .../4_Result/DialogSendToCommand.vue          | 300 ++++++++++++++++++
 .../components/4_Result/EditPage.vue          | 140 ++++++++
 .../components/4_Result/Form.vue              | 142 +++++++++
 .../components/4_Result/MainPage.vue          | 116 +++++++
 .../components/4_Result/Table.vue             | 189 +++++++++++
 .../11_discipline/interface/request/result.ts |  10 +
 .../interface/response/complaint.ts           |   6 +-
 src/modules/11_discipline/router.ts           | 131 +++++---
 .../11_discipline/store/ComplaintsStore.ts    |  10 +-
 .../11_discipline/store/ResultStore.ts        | 226 +++++++++++++
 18 files changed, 1222 insertions(+), 70 deletions(-)
 rename src/modules/11_discipline/components/{4_Order => !4_Order}/MainPage.vue (100%)
 rename src/modules/11_discipline/components/{4_Order => !4_Order}/OrderPage.vue (100%)
 rename src/modules/11_discipline/components/{4_Order => !4_Order}/Step01.vue (100%)
 rename src/modules/11_discipline/components/{4_Order => !4_Order}/Step02.vue (100%)
 rename src/modules/11_discipline/components/{4_Order => !4_Order}/Step03.vue (100%)
 rename src/modules/11_discipline/components/{4_Order => !4_Order}/TableOrder.vue (100%)
 create mode 100644 src/modules/11_discipline/components/4_Result/DialogSendToCommand.vue
 create mode 100644 src/modules/11_discipline/components/4_Result/EditPage.vue
 create mode 100644 src/modules/11_discipline/components/4_Result/Form.vue
 create mode 100644 src/modules/11_discipline/components/4_Result/MainPage.vue
 create mode 100644 src/modules/11_discipline/components/4_Result/Table.vue
 create mode 100644 src/modules/11_discipline/interface/request/result.ts
 create mode 100644 src/modules/11_discipline/store/ResultStore.ts

diff --git a/src/interface/request/main/main.ts b/src/interface/request/main/main.ts
index 39bb0ed30..efb3da8ad 100644
--- a/src/interface/request/main/main.ts
+++ b/src/interface/request/main/main.ts
@@ -419,37 +419,36 @@ const menuList = readonly<any[]>([
     icon: "mdi-scale-balance",
     activeIcon: "mdi-calendar",
     label: "วินัย",
-    path: "/discipline",
     role: "discipline",
     children: [
       {
         key: 11.1,
         label: "เรื่องร้องเรียน",
-        path: "/discipline-complaints",
+        path: "disciplineComplaints",
         role: "discipline",
       },
       {
         key: 11.2,
         label: "สืบสวนข้อเท็จจริง",
-        path: "/discipline-investigatefacts",
+        path: "disciplineInvestigatefacts",
         role: "discipline",
       },
       {
         key: 11.3,
         label: "สอบสวนความผิดวินัย",
-        path: "/discipline-disciplinary",
+        path: "disciplineDisciplinary",
         role: "discipline",
       },
       {
         key: 11.4,
-        label: "ออกคำสั่ง",
-        path: "/disciplineorder",
+        label: "สรุปผลการพิจารณาทางวินัย",
+        path: "disciplineResult",
         role: "discipline",
       },
       {
         key: 11.5,
         label: "รายงาน",
-        path: "/discipline-report",
+        path: "disciplineReport",
         role: "discipline",
       },
       {
@@ -460,12 +459,12 @@ const menuList = readonly<any[]>([
         children: [
           {
             label: "กรรมการ",
-            path: "/discipline-director",
+            path: "disciplineDirector",
             role: "discipline",
           },
           {
             label: "ช่องทางการร้องเรียน",
-            path: "/discipline-channel",
+            path: "disciplineChannel",
             role: "discipline",
           },
         ],
diff --git a/src/modules/11_discipline/components/4_Order/MainPage.vue b/src/modules/11_discipline/components/!4_Order/MainPage.vue
similarity index 100%
rename from src/modules/11_discipline/components/4_Order/MainPage.vue
rename to src/modules/11_discipline/components/!4_Order/MainPage.vue
diff --git a/src/modules/11_discipline/components/4_Order/OrderPage.vue b/src/modules/11_discipline/components/!4_Order/OrderPage.vue
similarity index 100%
rename from src/modules/11_discipline/components/4_Order/OrderPage.vue
rename to src/modules/11_discipline/components/!4_Order/OrderPage.vue
diff --git a/src/modules/11_discipline/components/4_Order/Step01.vue b/src/modules/11_discipline/components/!4_Order/Step01.vue
similarity index 100%
rename from src/modules/11_discipline/components/4_Order/Step01.vue
rename to src/modules/11_discipline/components/!4_Order/Step01.vue
diff --git a/src/modules/11_discipline/components/4_Order/Step02.vue b/src/modules/11_discipline/components/!4_Order/Step02.vue
similarity index 100%
rename from src/modules/11_discipline/components/4_Order/Step02.vue
rename to src/modules/11_discipline/components/!4_Order/Step02.vue
diff --git a/src/modules/11_discipline/components/4_Order/Step03.vue b/src/modules/11_discipline/components/!4_Order/Step03.vue
similarity index 100%
rename from src/modules/11_discipline/components/4_Order/Step03.vue
rename to src/modules/11_discipline/components/!4_Order/Step03.vue
diff --git a/src/modules/11_discipline/components/4_Order/TableOrder.vue b/src/modules/11_discipline/components/!4_Order/TableOrder.vue
similarity index 100%
rename from src/modules/11_discipline/components/4_Order/TableOrder.vue
rename to src/modules/11_discipline/components/!4_Order/TableOrder.vue
diff --git a/src/modules/11_discipline/components/3_InvestigateDisciplinary/EditPage.vue b/src/modules/11_discipline/components/3_InvestigateDisciplinary/EditPage.vue
index 0966f5325..302fab8d3 100644
--- a/src/modules/11_discipline/components/3_InvestigateDisciplinary/EditPage.vue
+++ b/src/modules/11_discipline/components/3_InvestigateDisciplinary/EditPage.vue
@@ -157,6 +157,7 @@ function confirmCancelInvestigate() {
 
 /** โหลดข้อมูลเมื่อเข้าหน้านี้ */
 onMounted(async () => {
+  store.tabMenu = 'disciplinary'
   await fetchDetailDisciplinary();
 });
 
@@ -196,12 +197,12 @@ watch(
         class="q-mr-sm"
         @click="$router.push(`/discipline/disciplinary`)"
       />
-      <div class="q-ma-none">แก้ไขการสอบสวนความผิดทางวินัย {{ id }}#id</div>
+      <div class="q-ma-none">แก้ไขการสอบสวนความผิดทางวินัย</div>
       <q-space />
       <div class="q-gutter-x-sm">
         <q-btn
           v-if="data.complaintStatus === 'NEW'"
-          label="ส่งไปออกคำสั่ง"
+          label="ส่งไปสรุปผลการพิจารณา"
           color="public"
           @click="sentIssue"
         />
diff --git a/src/modules/11_discipline/components/4_Result/DialogSendToCommand.vue b/src/modules/11_discipline/components/4_Result/DialogSendToCommand.vue
new file mode 100644
index 000000000..393b3122f
--- /dev/null
+++ b/src/modules/11_discipline/components/4_Result/DialogSendToCommand.vue
@@ -0,0 +1,300 @@
+<script setup lang="ts">
+import { ref, computed, watchEffect } from "vue";
+import { useQuasar } from "quasar";
+import { useCounterMixin } from "@/stores/mixin";
+import type { QTableProps } from "quasar";
+import type { ResponseData } from "@/modules/05_placement/interface/response/Transfer";
+
+import DialogHeader from "@/components/DialogHeader.vue";
+import http from "@/plugins/http";
+import config from "@/app.config";
+
+const $q = useQuasar();
+const selected = ref<ResponseData[]>([]);
+const mixin = useCounterMixin();
+const { showLoader, success, messageError, dialogConfirm,hideLoader } = mixin;
+
+//ค้นหา คอลัมน์ คอลัมน์ที่แสดง
+const visibleColumns2 = ref<string[]>([
+  "no",
+  "fullname",
+  "position",
+  "positionLevel",
+  "organizationPositionOld",
+  "organization",
+  "statustext",
+  "dateText",
+]);
+const columns2 = ref<QTableProps["columns"]>([
+  {
+    name: "no",
+    align: "left",
+    label: "ลำดับ",
+    sortable: false,
+    field: "no",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "fullname",
+    align: "left",
+    label: "ชื่อ-นามสกุล",
+    sortable: true,
+    field: "fullname",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "position",
+    align: "left",
+    label: "ตำแหน่งในสายงาน",
+    sortable: true,
+    field: "position",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "positionLevel",
+    align: "left",
+    label: "ระดับ",
+    sortable: true,
+    field: "positionLevel",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "organizationPositionOld",
+    align: "left",
+    label: "สังกัด",
+    sortable: true,
+    field: "organizationPositionOld",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "organization",
+    align: "left",
+    label: "หน่วยงานที่ขอโอนไป",
+    sortable: true,
+    field: "organization",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "dateText",
+    align: "left",
+    label: "วันที่ดำเนินการ",
+    sortable: true,
+    field: "dateText",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+    sortOrder: "da",
+  },
+  {
+    name: "statustext",
+    align: "left",
+    label: "สถานะ",
+    sortable: true,
+    field: "statustext",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+]);
+
+const props = defineProps({
+  Modal: Boolean,
+  closeModal: Function,
+  getData: Function,
+  rows2: Array,
+  filterKeyword2:String,
+});
+
+
+
+const checkSelected = computed(() => {
+  if (selected.value.length === 0) {
+    return true;
+  }
+});
+
+//popup ยืนยันส่งัว
+const saveOrder = () => {
+    dialogConfirm($q,() => Ordersave(),"ยืนยันส่งไปออกคำสั่ง","ต้องการยืนยันส่งไปออกคำสั่งใช่หรือไม่?" )
+}
+//ส่งไปออกคำสั่ง
+const Ordersave = async () => {
+  const id = selected.value.map((r) => r.id);
+  const body = {
+    id,
+  };
+
+  showLoader();
+  await http
+    .post(config.API.transferReport, body)
+    .then((res: any) => {
+      success($q, "ส่งไปออกคำสั่งสำเร็จ");
+      props.closeModal?.();
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(async () => {
+      props.getData?.();
+      hideLoader();
+    });
+};
+
+const emit = defineEmits([
+  "update:filterKeyword2",
+  "update:selected",
+
+]);
+const updateInput = (value: any) => {
+  emit("update:filterKeyword2", value);
+};
+//รีเซ็ตค่าในช่องค้นหา
+const Reset = () => {
+    emit("update:filterKeyword2", "");
+};
+watchEffect(() => {
+  if (props.Modal === true) {
+    selected.value = [];
+  }
+});
+</script>
+<template>
+  <q-dialog v-model="props.Modal">
+    <q-card style="width: 1200px; max-width: 80vw">
+      <DialogHeader tittle="ส่งไปออกคำสั่ง" :close="closeModal" />
+      <q-separator />
+      <q-card-section class="q-pt-none">
+        <div class="row justify-end">
+          <div class="col-5">
+            <q-toolbar style="padding: 0">
+              <q-input
+                borderless
+                outlined
+                dense
+                debounce="300"
+                :model-value="filterKeyword2" 
+                @update:model-value="updateInput"
+                placeholder="ค้นหา"
+                style="width: 850px; max-width: auto"
+              >
+                <template v-slot:append>
+                  <q-icon v-if="filterKeyword2 == ''" name="search" />
+                  <q-icon
+                    v-if="filterKeyword2 !== ''"
+                    name="clear"
+                    class="cursor-pointer"
+                    @click="Reset"
+                  />
+                </template>
+              </q-input>
+              <q-select
+                v-model="visibleColumns2"
+                multiple
+                outlined
+                dense
+                options-dense
+                :display-value="$q.lang.table.columns"
+                emit-value
+                map-options
+                :options="columns2"
+                option-value="name"
+                options-cover
+                style="min-width: 150px"
+                class="gt-xs q-ml-sm"
+              />
+            </q-toolbar>
+          </div>
+        </div>
+
+        <d-table
+          :columns="columns2"
+          :rows="rows2"
+          :filter="filterKeyword2"
+          row-key="id"
+          :visible-columns="visibleColumns2"
+          selection="multiple"
+          v-model:selected="selected"
+        >
+          <template v-slot:header-selection="scope">
+            <q-checkbox
+              keep-color
+              color="primary"
+              dense
+              v-model="scope.selected"
+            />
+          </template>
+
+          <template v-slot:body="props">
+            <q-tr :props="props" class="cursor-pointer">
+              <q-td>
+                <q-checkbox
+                  keep-color
+                  color="primary"
+                  dense
+                  v-model="props.selected"
+                />
+              </q-td>
+              <q-td key="no" :props="props">
+                {{ props.rowIndex + 1 }}
+              </q-td>
+              <q-td key="fullname" :props="props">
+                {{ props.row.fullname }}
+              </q-td>
+              <q-td key="position" :props="props">
+                {{ props.row.position }}
+              </q-td>
+              <q-td key="positionLevel" :props="props">
+                {{ props.row.positionLevel }}
+              </q-td>
+              <q-td key="organizationPositionOld" :props="props">
+                <div class="table_ellipsis">
+                  {{ props.row.organizationPositionOld }}
+                </div>
+              </q-td>
+              <q-td key="organization" :props="props">
+                <div class="table_ellipsis">
+                  {{ props.row.organization }}
+                </div>
+              </q-td>
+              <q-td key="dateText" :props="props">
+                {{ props.row.dateText }}
+              </q-td>
+              <q-td key="statustext" :props="props">
+                {{ props.row.statustext }}
+              </q-td>
+            </q-tr>
+          </template>
+        </d-table>
+      </q-card-section>
+
+      <q-card-actions align="right" class="bg-white text-teal">
+        <q-btn
+          label="ส่งไปออกคำสั่ง"
+          @click="saveOrder"
+          :disable="checkSelected"
+          color="public"
+        />
+      </q-card-actions>
+    </q-card>
+  </q-dialog>
+</template>
\ No newline at end of file
diff --git a/src/modules/11_discipline/components/4_Result/EditPage.vue b/src/modules/11_discipline/components/4_Result/EditPage.vue
new file mode 100644
index 000000000..3584fa57b
--- /dev/null
+++ b/src/modules/11_discipline/components/4_Result/EditPage.vue
@@ -0,0 +1,140 @@
+<script setup lang="ts">
+import { onMounted, reactive, ref } from "vue";
+import FormComplaints from "@/modules/11_discipline/components/1_Complaint/Form.vue"; //เรื่องร้องเรียน
+import FormInvestigatefacts from "@/modules/11_discipline/components/2_InvestigateFacts/Form.vue"; //สืบสวนข้อเท็จจริง
+import FormDisciplinary from "@/modules/11_discipline/components/3_InvestigateDisciplinary/Form.vue"; // สอบสวนความผิดทางวินัย
+import FormResult from "@/modules/11_discipline/components/4_Result/Form.vue"; // สอบสวนความผิดทางวินัย
+import type { FormData } from "@/modules/11_discipline/interface/request/result";
+import { useRouter, useRoute } from "vue-router";
+import { useCounterMixin } from "@/stores/mixin";
+import { useDisciplineResultStore } from "@/modules/11_discipline/store/ResultStore";
+import { useQuasar } from "quasar";
+import DialogSendToCommand from "@/modules/11_discipline/components/4_Result/DialogSendToCommand.vue";
+
+const $q = useQuasar();
+const mixin = useCounterMixin();
+const store = useDisciplineResultStore();
+const { dialogConfirm } = mixin;
+const router = useRouter();
+const route = useRoute();
+const id = ref<string>(route.params.id as string);
+
+/** ข้อมูล v-model ของฟอร์ม */
+const data = reactive<FormData>({
+  detail: "",
+});
+
+/** จำลองข้อมูลจาก api */
+const fetchData = async () => {
+  data.detail = "";
+};
+
+/**
+ * บันทึกข้อมูลที่เเก้ไข
+ * @param id ระบุ บุคคล
+ */
+const onSubmit = async (id: string) => {
+  console.log("edit");
+  router.push(`/discipline-result`);
+};
+
+const modal = ref<boolean>(false);
+const filterKeyword = ref<string>("");
+/** ฟังชั่นปิด dialog */
+function closeModal() {
+  modal.value = false;
+}
+
+function getData() {
+
+}
+
+/** ยืนยัน ส่งไปออกคำสั่ง */
+function sentIssue() {
+  modal.value = true
+  // dialogConfirm(
+  //   $q,
+  //   () => {
+  //     console.log("sent api ออกคำสั่ง");
+  //   },
+  //   "ยืนยันส่งไปออกคำสั่ง",
+  //   "ต้องการยืนยันส่งไปออกคำสั่งใช่หรือไม่?"
+  // );
+}
+
+/** โหลดข้อมูลเมื่อเข้าหน้านี้ */
+onMounted(async () => {
+  store.tabMenu = 'result'
+  await fetchData();
+});
+</script>
+<template>
+  <div class="col-xs-12 col-sm-12 col-md-11">
+    <div class="toptitle col-12 row items-center">
+      <q-btn
+        icon="mdi-arrow-left"
+        unelevated
+        round
+        dense
+        flat
+        color="primary"
+        class="q-mr-sm"
+        @click="$router.push(`/discipline-result`)"
+      />
+      <div class="q-ma-none">แก้ไขผลการพิจารณาทางวินัย</div>
+      <q-space />
+      <div class="q-gutter-x-sm">
+        <q-btn label="ส่งไปออกคำสั่ง" color="public" @click="sentIssue" />
+      </div>
+    </div>
+    <q-card flat class="col-12">
+      <q-tabs
+        v-model="store.tabMenu"
+        dense
+        align="left"
+        inline-label
+        class="rounded-borders"
+        indicator-color="primary"
+        active-bg-color="teal-1"
+        active-class="text-primary"
+      >
+        <q-tab name="complaints" label="เรื่องร้องเรียน" />
+        <q-tab name="investigatefacts" label="สืบสวนข้อเท็จจริง" />
+        <q-tab name="disciplinary" label="สอบสวนความผิดทางวินัย" />
+        <q-tab name="result" label="ผลการพิจารณาทางวินัย" />
+      </q-tabs>
+      <q-separator />
+      <q-tab-panels v-model="store.tabMenu" animated>
+        <q-tab-panel name="complaints">
+          <FormComplaints :on-submit="onSubmit" :data="data" />
+        </q-tab-panel>
+        <q-tab-panel name="investigatefacts">
+          <FormInvestigatefacts :on-submit="onSubmit" :data="data" />
+        </q-tab-panel>
+        <q-tab-panel name="disciplinary">
+          <FormDisciplinary :on-submit="onSubmit" :data="data" />
+        </q-tab-panel>
+        <q-tab-panel name="result">
+          <FormResult :on-submit="onSubmit" :data="data" />
+        </q-tab-panel>
+      </q-tab-panels>
+    </q-card>
+    <!-- <Form :on-submit="onSubmit" :data="data" /> -->
+  </div>
+
+  <DialogSendToCommand
+    v-model:Modal="modal"
+    :closeModal="closeModal"
+    :rows2="[]"
+    v-model:filterKeyword2="filterKeyword"
+    :getData="getData"
+  />
+
+</template>
+
+<style scoped>
+.q-tab-panel {
+  padding: 0;
+  background-color: #f0f3f3;
+}
+</style>
diff --git a/src/modules/11_discipline/components/4_Result/Form.vue b/src/modules/11_discipline/components/4_Result/Form.vue
new file mode 100644
index 000000000..47832b5ff
--- /dev/null
+++ b/src/modules/11_discipline/components/4_Result/Form.vue
@@ -0,0 +1,142 @@
+<script setup lang="ts">
+import { ref, onMounted, reactive, watch } from "vue";
+import { useQuasar, QForm } from "quasar";
+import { useRouter, useRoute } from "vue-router";
+import { useCounterMixin } from "@/stores/mixin";
+import { useInvestigateDisStore } from "@/modules/11_discipline/store/InvestigateDisStore";
+
+import type {
+  FormData,
+  FormRef,
+} from "@/modules/11_discipline/interface/request/result";
+
+const investigateDis = useInvestigateDisStore();
+const { fecthDirector } = investigateDis;
+
+const mixin = useCounterMixin();
+const { date2Thai, hideLoader, dialogConfirm } = mixin;
+const router = useRouter();
+const route = useRoute();
+
+const $q = useQuasar();
+const id = ref<string>(route.params.id as string);
+
+/** ตัวแปร ref สำหรับแสดง validate */
+const detailRef = ref<Object | null>(null);
+
+/** รับ props มาจากหน้าหลัก */
+const props = defineProps({
+  data: {
+    type: Object,
+    default: null,
+  },
+  onSubmit: {
+    type: Function,
+    default: () => "",
+  },
+});
+
+/** ข้อมูล v-model ของฟอร์ม */
+const formData = reactive<FormData>({
+  detail: "",
+});
+
+/** maping ref เข้าตัวแปรเพื่อเตรียมตรวจสอบ */
+const objectdisciplinary: FormRef = {
+  detail: detailRef,
+};
+
+/** ฟังชั่นตรวจสอบความถูกต้องก่อน บันทึก */
+function validateForm() {
+  const hasError = [];
+  for (const key in objectdisciplinary) {
+    if (Object.prototype.hasOwnProperty.call(objectdisciplinary, key)) {
+      const property = objectdisciplinary[key];
+      if (property.value && typeof property.value.validate === "function") {
+        const isValid = property.value.validate();
+        hasError.push(isValid);
+      }
+    }
+  }
+  if (hasError.every((result) => result === true)) {
+    onSubmit();
+  } else {
+    console.log(hasError);
+  }
+}
+
+/**
+ * ฟังก์ชั่นสำหรับบันทึกข้อมูล ระบบจะแสดง dialog ให้ยืนยันการบันทึก
+ * หากยืนยันจะส่งข้อมูลไปบันทึกที่ api
+ * หากยกเลิกจะกลับไปหน้าฟอร์ม
+ */
+function onSubmit() {
+  dialogConfirm(
+    $q,
+    async () => {
+      console.log(formData);
+      props.onSubmit();
+    },
+    "ยืนยันการบันทึกข้อมูล",
+    "ต้องการยืนยันการบันทึกข้อมูลนี้หรือไม่ ?"
+  );
+}
+
+async function fetchDatadetail() {
+  formData.detail = props.data.detail;
+}
+/**
+ * เช็คข้อมูลจาก props
+ * เมื่อมีข้อมูล
+ * เก็บข้อมูลลง formData
+ */
+watch(props.data, async () => {
+  fetchDatadetail();
+});
+
+/**เมื่อเริ่มโหลดหน้า
+ * ส่งข้อมูลจำลองไปยัง store
+ */
+onMounted(async () => {
+  await fetchDatadetail();
+});
+</script>
+<template>
+  <div class="col-xs-12 col-sm-12 col-md-11">
+    <form @submit.prevent="validateForm">
+      <div class="col-12">
+        <q-card>
+          <div class="col-12 row q-pa-md">
+            <div class="col-12 row q-col-gutter-md">
+              <q-input
+                type="textarea"
+                class="col-12"
+                dense
+                outlined
+                ref="detailRef"
+                v-model="formData.detail"
+                for="#detail"
+                label="สรุปผลการพิจารณา"
+                hide-bottom-space
+                :rules="[(val) => !!val || `${'กรุณากรอกกรณีมีความผิด'}`]"
+                lazy-rules
+              />
+            </div>
+          </div>
+          <q-separator />
+          <div class="row col-12 q-pa-sm">
+            <q-space />
+            <q-btn
+              for="ButtonOnSubmit"
+              id="formSubmit"
+              color="secondary"
+              label="บันทึก"
+              type="submit"
+              ><q-tooltip>บับทึกข้อมูล</q-tooltip></q-btn
+            >
+          </div>
+        </q-card>
+      </div>
+    </form>
+  </div>
+</template>
diff --git a/src/modules/11_discipline/components/4_Result/MainPage.vue b/src/modules/11_discipline/components/4_Result/MainPage.vue
new file mode 100644
index 000000000..9f17b8d22
--- /dev/null
+++ b/src/modules/11_discipline/components/4_Result/MainPage.vue
@@ -0,0 +1,116 @@
+<script setup lang="ts">
+import { onMounted, ref } from "vue";
+import { useQuasar } from "quasar";
+import { useRouter } from "vue-router";
+import Table from "@/modules/11_discipline/components/4_Result/Table.vue";
+import { useCounterMixin } from "@/stores/mixin";
+import { useDisciplineResultStore } from "@/modules/11_discipline/store/ResultStore";
+import type { Pagination } from "@/modules/03_recruiting/interface/index/Main";
+
+const $q = useQuasar(); // show dialog
+const router = useRouter();
+const filter = ref<string>(""); //search data table
+const mixin = useCounterMixin();
+const dataInvestigateDis = useDisciplineResultStore();
+const { showLoader, hideLoader } = mixin;
+const { fecthList } = dataInvestigateDis;
+
+const initialPagination = ref<Pagination>({
+  rowsPerPage: 0,
+});
+
+/**
+ * ไปหน้าแก้ไข
+ * @param id ไอดีเฉพาะ รายบุคคล
+ */
+function openEdit(id: string) {
+  console.log(id);
+  router.push(`/discipline-result/${id}`);
+}
+
+/**เมื่อเริ่มโหลดหน้า
+ * ส่งข้อมูลจำลองไปยัง store
+ */
+onMounted(async () => {
+  showLoader();
+  fecthList([
+    {
+      id: "001",
+      subject: "ทุจริตในหน้าที่",
+      interrogated: "ศิรินภา คงน้อยี่",
+      fault: "1",
+      penaltyLevel: "7",
+      caseFault: "ทุจริตในหน้าที่",
+      dateInvestigate: "2023-12-01",
+      status: "0",
+      active: "2",
+    },
+    {
+      id: "002",
+      subject: "ทุจริตในหน้าที่",
+      interrogated: "ภัทรานุช คงน้อย",
+      fault: "1",
+      penaltyLevel: "7",
+      caseFault: "ทุจริตในหน้าที่",
+      dateInvestigate: "2023-11-30",
+      status: "0",
+      active: "0",
+    },
+    {
+      id: "003",
+      subject: "กระทำทุจริตเงินกองทุน",
+      interrogated: "ปรมาพร ศรีมี",
+      fault: "2",
+      penaltyLevel: "1",
+      caseFault: "พบการทุจริต",
+      dateInvestigate: "2023-09-14",
+      status: "1",
+      active: "1",
+    },
+  ]);
+  await hideLoader();
+});
+</script>
+
+<template>
+  <div class="toptitle text-dark col-12 row items-center">
+    รายการผลการพิจารณาทางวินัย
+  </div>
+  <q-card flat bordered class="col-12 q-mt-sm q-pt-sm q-pa-md">
+    <div>
+      <Table
+        style="max-height: 80vh"
+        :rows="dataInvestigateDis.rows"
+        :columns="dataInvestigateDis.columns"
+        :filter="filter"
+        :visible-columns="dataInvestigateDis.visibleColumns"
+        v-model:inputfilter="filter"
+        v-model:inputvisible="dataInvestigateDis.visibleColumns"
+        :pagination="initialPagination"
+        :nornmalData="true"
+        :paging="true"
+        :titleText="''"
+      >
+        <template #columns="props">
+          <q-tr :props="props" class="cursor-pointer">
+            <q-td
+              v-for="col in props.cols"
+              :key="col.name"
+              :props="props"
+              @click="openEdit(props.row.id)"
+            >
+              <div v-if="col.name == 'no'">
+                {{ props.rowIndex + 1 }}
+              </div>
+              <div v-else>
+                {{ col.value }}
+              </div>
+            </q-td>
+          </q-tr>
+        </template>
+      </Table>
+    </div>
+  </q-card>
+</template>
+
+<style></style>
diff --git a/src/modules/11_discipline/components/4_Result/Table.vue b/src/modules/11_discipline/components/4_Result/Table.vue
new file mode 100644
index 000000000..443780074
--- /dev/null
+++ b/src/modules/11_discipline/components/4_Result/Table.vue
@@ -0,0 +1,189 @@
+<script setup lang="ts">
+import { ref, useAttrs } from "vue";
+import type { Pagination } from "@/modules/04_registry/interface/index/Main";
+
+const table = ref<any>(null);
+const filterRef = ref<any>(null);
+const attrs = ref<any>(useAttrs());
+const paging = ref<boolean>(true);
+const pagination = ref({
+  // sortBy: "desc",
+  descending: false,
+  page: 1,
+  rowsPerPage: 10,
+});
+
+/** รับ props มาจากหน้าหลัก */
+const props = defineProps({
+  count: Number,
+  pass: Number,
+  notpass: Number,
+  inputfilter: String,
+  name: String,
+  icon: String,
+  inputvisible: Array,
+  editvisible: Boolean,
+  validate: {
+    type: Function,
+    default: () => console.log("not function"),
+  },
+  nornmalData: {
+    type: Boolean,
+    defualt: true,
+  },
+  conclude: {
+    type: Boolean,
+    defualt: false,
+  },
+});
+
+const emit = defineEmits([
+  "update:inputfilter",
+  "update:inputvisible",
+  "update:editvisible",
+]);
+
+function paginationLabel(start: string, end: string, total: string) {
+  if (paging.value == true) return " " + start + "-" + end + " ใน " + total;
+  else return start + "-" + end + " ใน " + total;
+}
+
+function updateInput(value: string | number | null) {
+  emit("update:inputfilter", value);
+}
+
+function updateVisible(value: []) {
+  emit("update:inputvisible", value);
+}
+
+function resetFilter() {
+  // reset ค่าที่ค้นหาเมื่อกดปุ่ม X ในกล่องค้นหา
+  emit("update:inputfilter", "");
+  filterRef.value.focus();
+}
+</script>
+
+<template>
+  <div class="q-pb-sm row q-col-gutter-sm">
+    <div class="q-gutter-sm" v-if="nornmalData == true">
+      <!-- <q-btn
+        to="/discipline-result/add"
+        size="12px"
+        flat
+        round
+        color="add"
+        icon="mdi-plus"
+      >
+        <q-tooltip>เพิ่มข้อมูล</q-tooltip>
+      </q-btn> -->
+    </div>
+    <q-space />
+    <!-- ค้นหาข้อความใน table -->
+    <q-input
+      standout
+      dense
+      :model-value="inputfilter"
+      ref="filterRef"
+      @update:model-value="updateInput"
+      outlined
+      debounce="300"
+      placeholder="ค้นหา"
+      style="max-width: 200px"
+      class="col-xs-12 col-sm-3 col-md-2"
+    >
+      <template v-slot:append>
+        <q-icon v-if="inputfilter == ''" name="search" />
+        <q-icon
+          v-if="inputfilter !== ''"
+          name="clear"
+          class="cursor-pointer"
+          @click="resetFilter"
+        />
+      </template>
+    </q-input>
+    <!-- แสดงคอลัมน์ใน table -->
+    <q-select
+      :model-value="inputvisible"
+      @update:model-value="updateVisible"
+      :display-value="$q.lang.table.columns"
+      multiple
+      outlined
+      dense
+      :options="attrs.columns"
+      options-dense
+      option-value="name"
+      map-options
+      emit-value
+      class="col-xs-12 col-sm-3 col-md-2 gt-xs"
+    >
+    </q-select>
+  </div>
+  <d-table
+    ref="table"
+    flat
+    v-bind="attrs"
+    virtual-scroll
+    :virtual-scroll-sticky-size-start="48"
+    dense
+    :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" v-html="col.label" />
+        </q-th>
+      </q-tr>
+    </template>
+    <template #body="props">
+      <slot v-bind="props" name="columns"></slot>
+    </template>
+  </d-table>
+</template>
+
+<style lang="scss">
+.icon-color {
+  color: #4154b3;
+}
+
+.custom-table2 {
+  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;
+  }
+
+  .q-table td:nth-of-type(2) {
+    z-index: 3 !important;
+  }
+
+  .q-table th:nth-of-type(2),
+  .q-table td:nth-of-type(2) {
+    position: sticky;
+    left: 0;
+    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/interface/request/result.ts b/src/modules/11_discipline/interface/request/result.ts
new file mode 100644
index 000000000..b35e7a1e0
--- /dev/null
+++ b/src/modules/11_discipline/interface/request/result.ts
@@ -0,0 +1,10 @@
+interface FormData {
+  detail: string;
+}
+
+interface FormRef {
+  detail: object | null;
+  [key: string]: any;
+}
+
+export type { FormData, FormRef };
diff --git a/src/modules/11_discipline/interface/response/complaint.ts b/src/modules/11_discipline/interface/response/complaint.ts
index 01cce00c8..416cfb5eb 100644
--- a/src/modules/11_discipline/interface/response/complaint.ts
+++ b/src/modules/11_discipline/interface/response/complaint.ts
@@ -2,7 +2,7 @@ interface DataListRow {
   id: string;
   personId: string;
   title: string;
-  dateReceived: Date | "-";
+  dateReceived: string;
   respondentType: string;
   offenseDetails: string;
   createdAt: string;
@@ -34,12 +34,12 @@ interface DataList {
   id: string;
   personId: string;
   title: string;
-  dateReceived: Date | "-";
+  dateReceived: Date | null;
   respondentType: string;
   offenseDetails: string;
   createdAt: Date;
   levelConsideration: string;
-  dateConsideration: Date;
+  dateConsideration: Date | null;
   status: string;
 }
 
diff --git a/src/modules/11_discipline/router.ts b/src/modules/11_discipline/router.ts
index 126dca14c..f69308f15 100644
--- a/src/modules/11_discipline/router.ts
+++ b/src/modules/11_discipline/router.ts
@@ -14,8 +14,6 @@ const disciplinaryEdit = () =>
   import(
     "@/modules/11_discipline/components/3_InvestigateDisciplinary/EditPage.vue"
   );
-const oredrMain = () =>
-  import("@/modules/11_discipline/components/4_Order/MainPage.vue");
 const report = () =>
   import("@/modules/11_discipline/components/5_Report/MainPage.vue");
 const directorMain = () =>
@@ -53,198 +51,227 @@ const InvestigateDisciplinaryAdd = () =>
   import(
     "@/modules/11_discipline/components/3_InvestigateDisciplinary/AddPage.vue"
   );
-const orderPage = () =>
-  import("@/modules/11_discipline/components/4_Order/OrderPage.vue");
+// const orderPage = () =>
+//   import("@/modules/11_discipline/components/4_Order/OrderPage.vue");
+// const oredrMain = () =>
+//   import("@/modules/11_discipline/components/4_Order/MainPage.vue");
+
+/** หน้ารายการผลการพิจารณาทางวินัย */
+const resultMainPage = () =>
+  import("@/modules/11_discipline/components/4_Result/MainPage.vue");
+  const resultEditPage = () =>
+  import("@/modules/11_discipline/components/4_Result/EditPage.vue");
+
 export default [
   {
     path: "/discipline/complaints",
-    name: "/discipline-complaints",
+    name: "disciplineComplaints",
     component: complaintMain,
     meta: {
       Auth: true,
       Key: [11.1],
-      Role: "coin",
+      Role: "discipline",
     },
   },
   {
     path: "/discipline/complaints/add",
-    name: "/discipline-complaints-add",
+    name: "disciplineComplaintsAdd",
     component: complaintAdd,
     meta: {
       Auth: true,
       Key: [11.1],
-      Role: "coin",
+      Role: "discipline",
     },
   },
   {
     path: "/discipline/complaints/:id",
-    name: "/discipline-complaints-edit",
+    name: "disciplineComplaintsEdit",
     component: complaintEdit,
     meta: {
       Auth: true,
       Key: [11.1],
-      Role: "coin",
+      Role: "discipline",
     },
   },
   {
     path: "/discipline/investigatefacts",
-    name: "/discipline-investigatefacts",
+    name: "disciplineInvestigatefacts",
     component: factsMain,
     meta: {
       Auth: true,
       Key: [11.2],
-      Role: "coin",
+      Role: "discipline",
     },
   },
   {
     path: "/discipline/disciplinary",
-    name: "/discipline-disciplinary",
+    name: "disciplineDisciplinary",
     component: disciplinaryMain,
     meta: {
       Auth: true,
       Key: [11.3],
-      Role: "coin",
+      Role: "discipline",
     },
   },
   {
     path: "/discipline/disciplinary/:id",
-    name: "/discipline-disciplinaryEdit",
+    name: "disciplineDisciplinaryEdit",
     component: disciplinaryEdit,
     meta: {
       Auth: true,
       Key: [11.3],
-      Role: "coin",
+      Role: "discipline",
     },
   },
   {
-    path: "/discipline-order",
-    name: "/disciplineorder",
-    component: oredrMain,
+    path: "/discipline-result",
+    name: "disciplineResult",
+    component: resultMainPage,
     meta: {
       Auth: true,
       Key: [11.4],
-      Role: "coin",
+      Role: "discipline",
+    },
+  },
+  {
+    path: "/discipline-result/:id",
+    name: "disciplineEditResult",
+    component: resultEditPage,
+    meta: {
+      Auth: true,
+      Key: [11.4],
+      Role: "discipline",
     },
   },
   {
     path: "/discipline/report",
-    name: "/discipline-report",
+    name: "disciplineReport",
     component: report,
     meta: {
       Auth: true,
       Key: [11.5],
-      Role: "coin",
+      Role: "discipline",
     },
   },
   {
     path: "/discipline/report/:type",
-    name: "/discipline-reportType",
+    name: "disciplineReportType",
     component: reportType,
     meta: {
       Auth: true,
       Key: [11.5],
-      Role: "coin",
+      Role: "discipline",
     },
   },
   // ข้อมูลพื้นฐาน กรรมการ
   {
     path: "/discipline/director",
-    name: "/discipline-director",
+    name: "disciplineDirector",
     component: directorMain,
     meta: {
       Auth: true,
       Key: [11.6],
-      Role: "coin",
+      Role: "discipline",
     },
   },
   {
     path: "/discipline/director/add",
-    name: "discipline-director-add",
+    name: "disciplineDirectorAdd",
     component: directorAdd,
     meta: {
       Auth: true,
       Key: [11.6],
-      Role: "coin",
+      Role: "discipline",
     },
   },
   {
     path: "/discipline/director/:id",
-    name: "discipline-director-edit",
+    name: "disciplineDirectorEdit",
     component: directorEdit,
     meta: {
       Auth: true,
       Key: [11.6],
-      Role: "coin",
+      Role: "discipline",
     },
   },
   {
     path: "/discipline/channel",
-    name: "/discipline-channel",
+    name: "disciplineChannel",
     component: channelMain,
     meta: {
       Auth: true,
       Key: [11.6],
-      Role: "coin",
+      Role: "discipline",
     },
   },
   {
     path: "/discipline/investigatefacts/add",
-    name: "/discipline-investigatefactsAdd",
+    name: "disciplineInvestigatefactsAdd",
     component: investigatefactsAdd,
     meta: {
       Auth: true,
       Key: [11.2],
-      Role: "coin",
+      Role: "discipline",
     },
   },
   {
     path: "/discipline/investigatefacts/:id",
-    name: "/discipline-investigatefactsEdit",
+    name: "disciplineInvestigatefactsEdit",
     component: investigatefactsEdit,
     meta: {
       Auth: true,
       Key: [11.2],
-      Role: "coin",
+      Role: "discipline",
     },
   },
   {
     path: "/discipline/investigate-disciplinary/add",
-    name: "discipline_investigate_disciplinary_add",
+    name: "disciplineInvestigateDisciplinaryAdd",
     component: InvestigateDisciplinaryAdd,
     meta: {
       Auth: true,
       Key: [11.3],
-      Role: "coin",
+      Role: "discipline",
     },
   },
   {
     path: "/discipline/channel/add",
-    name: "/discipline-channelAdd",
+    name: "disciplineChannelAdd",
     component: channelAdd,
     meta: {
       Auth: true,
       Key: [11.2],
-      Role: "coin",
+      Role: "discipline",
     },
   },
   {
     path: "/discipline/channel/:id",
-    name: "/discipline-channelEdit",
+    name: "disciplineChannelEdit",
     component: channelEdit,
     meta: {
       Auth: true,
       Key: [11.2],
-      Role: "coin",
-    },
-  },
-  {
-    path: "/discipline-order/add",
-    name: "/disciplineorder-add",
-    component: orderPage,
-    meta: {
-      Auth: true,
-      Key: [11.4],
-      Role: "coin",
+      Role: "discipline",
     },
   },
+  // {
+  //   path: "/discipline-order",
+  //   name: "disciplineOrder",
+  //   component: oredrMain,
+  //   meta: {
+  //     Auth: true,
+  //     Key: [11.4],
+  //     Role: "discipline",
+  //   },
+  // },
+  // {
+  //   path: "/discipline-order/add",
+  //   name: "disciplineOrderAdd",
+  //   component: orderPage,
+  //   meta: {
+  //     Auth: true,
+  //     Key: [11.4],
+  //     Role: "discipline",
+  //   },
+  // },
 ];
diff --git a/src/modules/11_discipline/store/ComplaintsStore.ts b/src/modules/11_discipline/store/ComplaintsStore.ts
index ff13a70ac..6e9b2992f 100644
--- a/src/modules/11_discipline/store/ComplaintsStore.ts
+++ b/src/modules/11_discipline/store/ComplaintsStore.ts
@@ -33,19 +33,21 @@ export const useComplainstDataStore = defineStore(
     }
 
     function fetchComplainst(data: DataList[]) {
-      let datalist: DataListRow[] = data.map((e: DataList) => ({
+      let dataList: DataListRow[] = data.map((e: DataList) => ({
         id: e.id,
         personId: e.personId,
         title: e.title,
-        dateReceived: e.dateReceived ? e.dateReceived : "-",
+        dateReceived: e.dateReceived ? date2Thai(e.dateReceived) : "-",
         respondentType: convertComplaintType(e.respondentType),
         offenseDetails: offenseDetailsTran(e.offenseDetails),
         createdAt: date2Thai(e.createdAt)!,
         levelConsideration: levelConsiderationTran(e.levelConsideration),
-        dateConsideration: date2Thai(e.dateConsideration)!,
+        dateConsideration: e.dateConsideration
+          ? date2Thai(e.dateConsideration)
+          : "-",
         status: statusTothai(e.status),
       }));
-      rows.value = datalist;
+      rows.value = dataList;
     }
 
     // filter options
diff --git a/src/modules/11_discipline/store/ResultStore.ts b/src/modules/11_discipline/store/ResultStore.ts
new file mode 100644
index 000000000..947b250bb
--- /dev/null
+++ b/src/modules/11_discipline/store/ResultStore.ts
@@ -0,0 +1,226 @@
+import { defineStore } from "pinia";
+import { ref } from "vue";
+import type { QTableProps } from "quasar";
+import type {
+  investigateDisDataRowType,
+  DataOption,
+  directorType,
+} from "@/modules/11_discipline/interface/index/Main";
+import { useCounterMixin } from "@/stores/mixin";
+const mixin = useCounterMixin();
+const { date2Thai } = mixin;
+
+export const useDisciplineResultStore = defineStore(
+  "disciplineResultStore",
+  () => {
+    const tabMenu = ref<string>("result");
+    const rows = ref<investigateDisDataRowType[]>([]);
+    const rows2 = ref<directorType[]>([]);
+    const selected = ref<directorType[]>([]);
+
+    async function fecthList(data: investigateDisDataRowType[]) {
+      let datalist: investigateDisDataRowType[] = data.map((e: any) => ({
+        id: e.id,
+        subject: e.subject,
+        interrogated: e.interrogated,
+        caseFault: e.caseFault,
+        dateInvestigate: date2Thai(new Date(e.dateInvestigate)),
+      }));
+      rows.value = datalist;
+    }
+
+    async function fecthDirector(data: directorType[]) {
+      let datalistDirector: directorType[] = data.map((e: directorType) => ({
+        nameDirector: e.nameDirector,
+        position: e.position,
+        duty: e.duty,
+        email: e.email,
+        telephone: e.telephone,
+        role: e.role,
+      }));
+      rows2.value = datalistDirector;
+      selected.value = rows2.value;
+      console.log(rows2.value);
+    }
+
+    const visibleColumns = ref<String[]>([
+      "no",
+      "subject",
+      "interrogated",
+      "fault",
+      "penaltyLevel",
+      "caseFault",
+      "dateInvestigate",
+      "status",
+    ]);
+
+    const columns = ref<QTableProps["columns"]>([
+      {
+        name: "no",
+        align: "center",
+        label: "ลำดับ",
+        sortable: false,
+        field: "no",
+        headerStyle: "font-size: 14px",
+        style: "font-size: 14px",
+      },
+      {
+        name: "subject",
+        align: "left",
+        label: "เรื่อง",
+        sortable: true,
+        field: "subject",
+        headerStyle: "font-size: 14px",
+        style: "font-size: 14px",
+      },
+      {
+        name: "interrogated",
+        align: "left",
+        label: "ผู้ถูกสืบสวน",
+        sortable: true,
+        field: "interrogated",
+        headerStyle: "font-size: 14px",
+        style: "font-size: 14px",
+        sort: (a: string, b: string) =>
+          a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+      },
+      {
+        name: "fault",
+        align: "left",
+        label: "ลักษณะความผิด",
+        sortable: true,
+        field: "fault",
+        headerStyle: "font-size: 14px",
+        style: "font-size: 14px",
+        sort: (a: string, b: string) =>
+          a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+      },
+      {
+        name: "penaltyLevel",
+        align: "left",
+        label: "ระดับโทษความผิด",
+        sortable: true,
+        field: "penaltyLevel",
+        headerStyle: "font-size: 14px",
+        style: "font-size: 14px",
+        sort: (a: string, b: string) =>
+          a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+      },
+      {
+        name: "caseFault",
+        align: "left",
+        label: "กรณีความผิด",
+        sortable: true,
+        field: "caseFault",
+        headerStyle: "font-size: 14px",
+        style: "font-size: 14px",
+        sort: (a: string, b: string) =>
+          a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+      },
+      {
+        name: "dateInvestigate",
+        align: "left",
+        label: "วันที่สอบสวน",
+        sortable: true,
+        field: "dateInvestigate",
+        headerStyle: "font-size: 14px",
+        style: "font-size: 14px",
+      },
+      {
+        name: "status",
+        align: "left",
+        label: "สถานะ",
+        sortable: true,
+        field: "status",
+        headerStyle: "font-size: 14px",
+        style: "font-size: 14px",
+      },
+    ]);
+
+    const visibleColumnsDirector = ref<String[]>([
+      "no",
+      "name",
+      "position",
+      "duty",
+      "email",
+      "telephone",
+      "role",
+    ]);
+    const columnsDirector = ref<QTableProps["columns"]>([
+      {
+        name: "no",
+        align: "left",
+        label: "ลำดับ",
+        sortable: false,
+        field: "no",
+        headerStyle: "font-size: 14px",
+        style: "font-size: 14px",
+      },
+      {
+        name: "name",
+        align: "left",
+        label: "ชื่อ - นามสกุล",
+        sortable: true,
+        field: "name",
+        headerStyle: "font-size: 14px",
+        style: "font-size: 14px",
+      },
+      {
+        name: "position",
+        align: "left",
+        label: "ตำแหน่ง",
+        sortable: true,
+        field: "position",
+        headerStyle: "font-size: 14px",
+        style: "font-size: 14px",
+      },
+      {
+        name: "duty",
+        align: "left",
+        label: "หน้าที่",
+        sortable: true,
+        field: "duty",
+        headerStyle: "font-size: 14px",
+        style: "font-size: 14px",
+      },
+      {
+        name: "email",
+        align: "left",
+        label: "อีเมล",
+        sortable: true,
+        field: "email",
+        headerStyle: "font-size: 14px",
+        style: "font-size: 14px",
+      },
+      {
+        name: "telephone",
+        align: "left",
+        label: "เบอร์โทรศัพท์",
+        sortable: true,
+        field: "telephone",
+        headerStyle: "font-size: 14px",
+        style: "font-size: 14px",
+      },
+      {
+        name: "role",
+        align: "left",
+        label: "จำนวนเรื่องสืบสวน",
+        sortable: true,
+        field: "role",
+        headerStyle: "font-size: 14px",
+        style: "font-size: 14px",
+      },
+    ]);
+    return {
+      tabMenu,
+      fecthList,
+      rows,
+      rows2,
+      fecthDirector,
+      visibleColumns,
+      columns,
+      visibleColumnsDirector,
+      columnsDirector,
+    };
+  }
+);