Merge branch 'develop' into devTee

2023-11-23 17:02:45 +07:00 · 2023-11-23 17:02:45 +07:00 · 418437486d
commit 418437486d
parent 9e3f326235 9d467c110a
16 changed files with 821 additions and 631 deletions
--- a/src/api/09_leave/api.leave.ts
+++ b/src/api/09_leave/api.leave.ts
@ -6,5 +6,6 @@ export default {

  /**รายการลงเวลาปฏิบัติงาน */
  logRecord: () => `${leave}/log-record`,
+  timeRecord: () => `${leave}/time-record`,
  timeRecordById: (id: string) => `${leave}/time-record/${id}`,
 };
--- a/src/modules/09_leave/components/1_Work/Tab1.vue
+++ b/src/modules/09_leave/components/1_Work/Tab1.vue
@ -1,5 +1,8 @@
 <script setup lang="ts">
 import { ref, onMounted, onUnmounted } from "vue";
+import { useQuasar } from "quasar";
+import http from "@/plugins/http";
+import config from "@/app.config";

 /** importType*/
 import type { QTableProps } from "quasar";
@ -19,13 +22,15 @@ import { useWorklistDataStore } from "@/modules/09_leave/stores/WorkStore";
 /** useStore */
 const mixin = useCounterMixin();
 const workStore = useWorklistDataStore();
-const { date2Thai, dateToISO, showLoader, hideLoader } = mixin;
+const { date2Thai, dateToISO, showLoader, hideLoader, messageError } = mixin;
+
+const $q = useQuasar(); //ใช้ noti quasar

 const keyword = ref<string>("");
 const page = ref<number>(1);
-const rowsPerPage = ref<number>(10);
+const rowsPerPage = ref<number>(3);
 const maxPage = ref<number>(1);
-const filetStatus = ref<string>("");
+const filetStatus = ref<string>("LATE");

 /** ข้อมูลหัวตาราง*/
 const columns = ref<QTableProps["columns"]>([
@ -115,42 +120,6 @@ const visibleColumns = ref<string[]>([
 const rows = ref<TableRowsTime[]>([]);

 async function fetchListTimeRecord() {
-  showLoader();
-  const listData: DataResTime[] = [
-    {
-      id: "00000000-0000-0000-0000-000000000000",
-      fullName: "นางอมร ใจดี",
-      checkInDate: new Date(),
-      checkInTime: "08:30",
-      checkInLocation: "สำนักงงาน",
-      checkInLat: "18.7903",
-      checkInLon: "99.0029",
-      checkInStatus: "normal",
-      checkOutDate: new Date(),
-      checkOutLocation: "สำนักงงาน",
-      checkOutTime: "18:04",
-      checkOutLat: "18.7903",
-      checkOutLon: "99.0029",
-      checkOutStatus: "late",
-    },
-    {
-      id: "00000000-0000-0000-0000-000000000000",
-      fullName: "นางอมร ใจดี",
-      checkInDate: new Date(),
-      checkInTime: "08:30",
-      checkInLocation: "สำนักงงาน",
-      checkInLat: "18.7903",
-      checkInLon: "99.0029",
-      checkInStatus: "normal",
-      checkOutDate: new Date(),
-      checkOutLocation: "สำนักงงาน",
-      checkOutTime: "18:04",
-      checkOutLat: "18.7903",
-      checkOutLon: "99.0029",
-      checkOutStatus: "late",
-    },
-  ];
-
  const date = new Date(workStore.selectDate as string | Date);
  const querySting = {
    startDate: dateToISO(date), //*วันที่เริ่ม
@ -160,29 +129,43 @@ async function fetchListTimeRecord() {
    pageSize: rowsPerPage.value, //*จำนวนแถวต่อหน้า
    keyword: keyword.value, //keyword ค้นหา
  };
-
-  console.log(querySting);
-
-  const datalist: TableRowsTime[] = listData.map((e: DataResTime) => ({
-    id: e.id,
-    fullName: e.fullName,
-    checkInDate: e.checkInDate && date2Thai(e.checkInDate),
-    checkInTime: e.checkInTime,
-    checkInLocation: e.checkInLocation,
-    checkInLat: e.checkInLat,
-    checkInLon: e.checkInLon,
-    checkInStatus: e.checkInStatus && workStore.convertSatatus(e.checkInStatus),
-    checkOutDate: e.checkOutDate && date2Thai(e.checkOutDate),
-    checkOutLocation: e.checkOutLocation,
-    checkOutTime: e.checkOutTime,
-    checkOutLat: e.checkOutLat,
-    checkOutLon: e.checkOutLon,
-    checkOutStatus:
-      e.checkOutStatus && workStore.convertSatatus(e.checkOutStatus),
-  }));
-  rows.value = datalist;
-  maxPage.value = Math.ceil(rows.value.length / rowsPerPage.value);
-  hideLoader();
+  showLoader();
+  await http
+    .get(
+      config.API.timeRecord() +
+        `?startDate=${querySting.startDate}&endDate=${querySting.startDate}
+        &status=${querySting.status}&page=${querySting.page}&pageSize=${querySting.pageSize}&keyword=${querySting.keyword}`
+    )
+    .then((res) => {
+      maxPage.value = Math.ceil(res.data.result.total / rowsPerPage.value);
+      const datalist: TableRowsTime[] = res.data.result.data.map(
+        (e: DataResTime) => ({
+          id: e.id,
+          fullName: e.fullName,
+          checkInDate: e.checkInDate && date2Thai(e.checkInDate),
+          checkInTime: e.checkInTime,
+          checkInLocation: e.checkInLocation,
+          checkInLat: e.checkInLat,
+          checkInLon: e.checkInLon,
+          checkInStatus:
+            e.checkInStatus && workStore.convertSatatus(e.checkInStatus),
+          checkOutDate: e.checkOutDate && date2Thai(e.checkOutDate),
+          checkOutLocation: e.checkOutLocation,
+          checkOutTime: e.checkOutTime,
+          checkOutLat: e.checkOutLat,
+          checkOutLon: e.checkOutLon,
+          checkOutStatus:
+            e.checkOutStatus && workStore.convertSatatus(e.checkOutStatus),
+        })
+      );
+      rows.value = datalist;
+    })
+    .catch((err) => {
+      messageError($q, err);
+    })
+    .finally(() => {
+      hideLoader();
+    });
 }

 async function updatePaging(
@ -194,7 +177,7 @@ async function updatePaging(
  page.value = currentPage;
  rowsPerPage.value = params.rowsPerPage ?? rowsPerPage.value;
  keyword.value = key ?? keyword.value;
-  filetStatus.value = status;
+  filetStatus.value = status ?? filetStatus.value;
  await fetchListTimeRecord();
 }

--- a/src/modules/09_leave/components/1_Work/ToolBar.vue
+++ b/src/modules/09_leave/components/1_Work/ToolBar.vue
@ -16,10 +16,10 @@ const updateProp = (newPagination: any, keyword: string, status: string) => {
 };

 const option = ref<any[]>([
-  { id: "", name: "ทั้งหมด" },
-  { id: "normal", name: "ปกติ" },
-  { id: "late", name: "สาย" },
-  { id: "absent", name: "ขาดราชการ" },
+  { id: "ALL", name: "ทั้งหมด" },
+  { id: "NORMAL", name: "ปกติ" },
+  { id: "LATE", name: "สาย" },
+  { id: "ABSENT", name: "ขาดราชการ" },
 ]);
 const filetStatus = ref<string>("");
 const keyword = ref<string>("");
--- a/src/modules/11_discipline/components/1_Complaint/Popup.vue
+++ b/src/modules/11_discipline/components/1_Complaint/Popup.vue
@ -15,6 +15,10 @@ const $q = useQuasar();
 const { dialogConfirm, dialogMessageNotify, success } = mixin;

 const props = defineProps({
+  title: {
+    type: String,
+    default: 'ส่งไปสืบสวน',
+  },
  modal: {
    type: Boolean,
    require: true,
@ -128,13 +132,13 @@ function onclickSend() {
    dialogConfirm(
      $q,
      async () => {
-        success($q, "ส่งข้อมูลไปสืบสวนสำเร็จ");
+        success($q, `ส่งข้อมูล${props.title}สำเร็จ`);
        console.log(selected.value);

        props.close?.();
      },
-      "ยืนยันการส่งไปสืบสวน",
-      "ต้องการยืนยันการส่งไปสืบสวนหรือไม่"
+      `ยืนยันการส่ง${props.title}`,
+      `ต้องการยืนยันการส่ง${props.title}หรือไม่`
    );
  } else {
    dialogMessageNotify($q, "กรุณาเลือกรายชื่อ");
@ -155,7 +159,7 @@ watch([() => props.modal], () => {
 <template>
  <q-dialog v-model="props.modal">
    <q-card style="width: 820px; max-width: 80vw">
-      <DialogHeader tittle="มีมูลส่งไปสืบสวน" :close="onClickClose" />
+      <DialogHeader :tittle="props.title" :close="onClickClose" />

      <q-separator />

@ -277,7 +281,7 @@ watch([() => props.modal], () => {
      </q-card-section>
      <q-separator />
      <q-card-actions align="right" class="bg-white text-teal">
-        <q-btn label="ส่งไปสืบสวน" color="public" @click="onclickSend" />
+        <q-btn :label="props.title" color="public" @click="onclickSend" />
      </q-card-actions>
    </q-card>
  </q-dialog>
--- a/src/modules/11_discipline/components/2_InvestigateFacts/EditPage.vue
+++ b/src/modules/11_discipline/components/2_InvestigateFacts/EditPage.vue
@ -2,11 +2,12 @@
 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 type { FormData } from "@/modules/11_discipline/interface/request/investigate";
 import { useRouter, useRoute } from "vue-router";
 import { useCounterMixin } from "@/stores/mixin";
 import { useInvestigateFactStore } from "@/modules/11_discipline/store/InvestigateFactStore";
 import { useQuasar } from "quasar";
+import Popup from "@/modules/11_discipline/components/1_Complaint/Popup.vue";
+import type { FormData } from "@/modules/11_discipline/interface/request/investigateFact";

 const $q = useQuasar();
 const mixin = useCounterMixin();
@ -32,7 +33,8 @@ const data = reactive<FormData>({
  daysExtend: null,
  statusResult: "",
  causeText: "",
-  complaintStatus: "NEW",
+  complaintStatus: "",
+  reason: "",
 });

 /** จำลองข้อมูลจาก api */
@ -48,10 +50,11 @@ const fetchData = async () => {
  data.clickTime = false;
  data.date = new Date("2023-11-07T14:58:00");
  data.dateEnd = new Date("2023-11-08T14:58:00");
-  data.investigation = "002";
+  data.investigation = "appoint_directors";
  data.daysExtend = null;
-  data.statusResult = "ไม่ระบุ";
+  data.statusResult = "not_specified";
  data.causeText = "";
+  data.complaintStatus = "NEW";
 };

 /**
@ -64,14 +67,20 @@ async function onSubmit(id: string) {
  router.push(`/discipline/investigatefacts`);
 }

+const modalPopup = ref<boolean>(false);
 /** ยืนยัน ส่งไปสอบสวน */
 function sentInvestigate() {
-  dialogConfirm(
-    $q,
-    () => confirmSentInvestigate(),
-    "ยืนยันส่งไปสอบสวน",
-    "ต้องการยืนยันส่งไปสอบสวนใช่หรือไม่?"
-  );
+  modalPopup.value = true;
+  // dialogConfirm(
+  //   $q,
+  //   () => confirmSentInvestigate(),
+  //   "ยืนยันส่งไปสอบสวน",
+  //   "ต้องการยืนยันส่งไปสอบสวนใช่หรือไม่?"
+  // );
+}
+
+function closePopup() {
+  modalPopup.value = false;
 }

 /** ยืนยัน ยุติเรื่อง */
@ -177,7 +186,7 @@ onMounted(() => {
      </q-tab-panels>
    </q-card>

-    <!-- <Form :on-submit="onSubmit" :data="data" /> -->
+    <Popup :modal="modalPopup" :close="closePopup" title="ส่งไปสอบสวน"/>
  </div>
 </template>
 <style scoped>
--- a/src/modules/11_discipline/components/2_InvestigateFacts/Form.vue
+++ b/src/modules/11_discipline/components/2_InvestigateFacts/Form.vue
@ -10,8 +10,7 @@ import { useInvestigateFactStore } from "@/modules/11_discipline/store/Investiga
 import type {
  FormData,
  MyObjectInvestigateRef,
-} from "@/modules/11_discipline/interface/request/investigate";
-import { diffDates } from "@fullcalendar/core/internal";
+} from "@/modules/11_discipline/interface/request/investigateFact";

 const $q = useQuasar();
 const route = useRoute();
@ -23,7 +22,7 @@ const { filterFnOptionsType } = investigateFactStore;
 const { date2Thai, dialogConfirm } = mixin;
 const investigateDis = useInvestigateDisStore();

-const complaintsOptions = ref<any>([]);
+// const complaintsOptions = ref<any>([]);
 const isUpdate = ref<boolean>(false);

 /** ตัวแปร ref สำหรับแสดง validate */
@ -41,6 +40,7 @@ const investigationRef = ref<Object | null>(null);
 const daysExtendRef = ref<Object | null>(null);
 const statusResultRef = ref<Object | null>(null);
 const causeTextRef = ref<Object | null>(null);
+const reasonRef = ref<Object | null>(null);

 /** รับ props มาจากหน้าหลัก */
 const props = defineProps({
@ -70,11 +70,12 @@ const formData = reactive<FormData>({
  dateEnd: new Date(),
  investigation: "",
  daysExtend: null,
-  statusResult: "ยังไม่ระบุ",
+  statusResult: "",
  causeText: "",
  complaintStatus: "",
+  reason: "",
 });
-const evidenceFiles = ref<any>([{ name: "ชื่อไฟล" }, { name: "ชื่อไฟล" }]);
+const evidenceFiles = ref<any>([{ name: "ชื่อไฟล์" }, { name: "ชื่อไฟล์" }]);

 /** maping ref เข้าตัวแปรเพื่อเตรียมตรวจสอบ */
 const objectInvestigate: MyObjectInvestigateRef = {
@ -91,6 +92,7 @@ const objectInvestigate: MyObjectInvestigateRef = {
  daysExtend: daysExtendRef,
  statusResult: statusResultRef,
  causeText: causeTextRef,
+  reason: reasonRef,
 };

 const rows = ref([]);
@ -163,7 +165,7 @@ async function fetchDataDetail() {
    formData.dateEnd = props.data.dateEnd;
    formData.investigation = props.data.investigation;
    formData.daysExtend = props.data.daysExtend;
-    formData.statusResult = props.data.results;
+    formData.statusResult = props.data.statusResult;
    formData.causeText = props.data.results;
  }
 }
@ -601,61 +603,162 @@ watch(props.data, async () => {
          />
        </div>

-        <div class="row col-12 q-col-gutter-md">
-          <div class="col-3">
-            <q-select
-              for="#fault"
-              outlined
-              dense
-              :readonly="statusStep"
-              lazy-rules
-              ref="statusResultRef"
-              v-model="formData.statusResult"
-              :rules="[(val) => !!val || `${'กรุณาเลือกผลการสืบสวน'}`]"
-              :options="investigateFactStore.statusResultOptions"
-              label="ผลการสืบสวน"
-              emit-value
-              map-options
-              option-label="name"
-              option-value="id"
-              use-input
-              @filter="(inputValue: any,
+        <div class="row col-12">
+          <q-card bordered class="row col-12" style="border: 1px solid #d6dee1">
+            <div
+              class="col-xs-12 col-sm-12 text-weight-medium bg-grey-1 q-py-xs q-px-md"
+            >
+              ผลการสืบสวน
+            </div>
+
+            <div class="col-12"><q-separator /></div>
+
+            <div class="col-xs-12 q-pa-sm row">
+              <div class="row col-12 q-col-gutter-md">
+                <div class="col-3">
+                  <q-select
+                    for="#fault"
+                    outlined
+                    dense
+                    :readonly="statusStep"
+                    lazy-rules
+                    ref="statusResultRef"
+                    v-model="formData.statusResult"
+                    :rules="[(val) => !!val || `${'กรุณาเลือกผลการสืบสวน'}`]"
+                    :options="investigateFactStore.statusResultOptions"
+                    label="ผลการสืบสวน"
+                    emit-value
+                    map-options
+                    option-label="name"
+                    option-value="id"
+                    use-input
+                    @filter="(inputValue: any,
                doneFn: Function) => filterFnOptionsType(inputValue, doneFn, 'faultOp'
                )"
-              ><template v-slot:no-option>
-                <q-item>
-                  <q-item-section class="text-grey">
-                    ไม่มีข้อมูล
-                  </q-item-section>
-                </q-item>
-              </template>
-            </q-select>
-          </div>
+                    ><template v-slot:no-option>
+                      <q-item>
+                        <q-item-section class="text-grey">
+                          ไม่มีข้อมูล
+                        </q-item-section>
+                      </q-item>
+                    </template>
+                  </q-select>
+                </div>

-          <div v-if="formData.statusResult == 'have_cause'" class="col-3">
-            <q-select
-              for="#fault"
-              outlined
-              dense
-              ref="causeTextRef"
-              v-model="formData.causeText"
-              :rules="[(val) => !!val || `${'กรุณาเลือกร้ายแรง/ไม่ร้ายแรง'}`]"
-              :options="investigateFactStore.causeTextOptions"
-              label="ร้ายแรง/ไม่ร้ายแรง"
-              emit-value
-              map-options
-              option-label="name"
-              option-value="id"
-              use-input
-              ><template v-slot:no-option>
-                <q-item>
-                  <q-item-section class="text-grey">
-                    ไม่มีข้อมูล
+                <div v-if="formData.statusResult == 'have_cause'" class="col-3">
+                  <q-select
+                    for="#fault"
+                    outlined
+                    dense
+                    ref="causeTextRef"
+                    v-model="formData.causeText"
+                    :rules="[
+                      (val) => !!val || `${'กรุณาเลือกร้ายแรง/ไม่ร้ายแรง'}`,
+                    ]"
+                    :options="investigateFactStore.causeTextOptions"
+                    label="ร้ายแรง/ไม่ร้ายแรง"
+                    emit-value
+                    map-options
+                    option-label="name"
+                    option-value="id"
+                    use-input
+                    ><template v-slot:no-option>
+                      <q-item>
+                        <q-item-section class="text-grey">
+                          ไม่มีข้อมูล
+                        </q-item-section>
+                      </q-item>
+                    </template>
+                  </q-select>
+                </div>
+              </div>
+
+              <div class="row col-12">
+                <q-input
+                  class="full-width cursor-pointer"
+                  outlined
+                  ref="reasonRef"
+                  dense
+                  lazy-rules
+                  borderless
+                  v-model="formData.reason"
+                  :rules="[(val) => !!val || `${'กรุณากรอกเหตุผล'}`]"
+                  hide-bottom-space
+                  :label="`${'เหตุผล'}`"
+                  type="textarea"
+                />
+              </div>
+            </div>
+
+            <div class="col-xs-12 q-pa-sm row">
+              <q-file
+                class="col-11"
+                for="#evidenceFiles"
+                outlined
+                dense
+                ref="evidenceFilesRef"
+                v-model="formData.evidenceFiles"
+                label="เอกสารที่เกี่ยวข้องกับการสืบสวน"
+                lazy-rules
+                :rules="[(val) => !!val || 'กรุณาเลือกไฟล์เอกสารที่เกี่ยวข้องกับการสืบสวน']"
+                hide-bottom-space
+              >
+                <template v-slot:prepend>
+                  <q-icon name="attach_file" color="primary" />
+                </template>
+              </q-file>
+              <div class="col-1 self-center">
+                <q-btn
+                  size="14px"
+                  flat
+                  round
+                  dense
+                  color="add"
+                  class="q-ml-sm"
+                  icon="mdi-upload"
+                  ><q-tooltip>อัปโหลดเอกสาร</q-tooltip></q-btn
+                >
+              </div>
+
+              <q-list bordered separator class="full-width q-mt-md">
+                <q-item
+                  clickable
+                  v-ripple
+                  v-for="(file, index) in evidenceFiles"
+                  :key="index"
+                >
+                  <q-item-section>{{ file.name + (index + 1) }}</q-item-section>
+                  <q-item-section avatar>
+                    <div class="row">
+                      <div>
+                        <q-btn
+                          dense
+                          flat
+                          round
+                          size="12px"
+                          color="blue"
+                          icon="mdi-download-outline"
+                        >
+                          <q-tooltip>ดาวน์โหลด</q-tooltip>
+                        </q-btn>
+                      </div>
+                      <div>
+                        <q-btn
+                          dense
+                          flat
+                          round
+                          size="12px"
+                          color="red"
+                          icon="mdi-delete-outline"
+                          ><q-tooltip>ลบเอกสารหลักฐาน</q-tooltip></q-btn
+                        >
+                      </div>
+                    </div>
                  </q-item-section>
                </q-item>
-              </template>
-            </q-select>
-          </div>
+              </q-list>
+            </div>
+          </q-card>
        </div>
      </div>

@ -668,87 +771,88 @@ watch(props.data, async () => {
      </div>
    </form>
  </q-card>
-  <div class="col-12 row q-col-gutter-md q-mt-sm">
-    <div class="row col-12">
-      <q-card bordered class="row col-12" style="border: 1px solid #d6dee1">
-        <div
-          class="col-xs-12 col-sm-12 text-weight-medium bg-grey-1 q-py-xs q-px-md"
-        >
-          อัปโหลดไฟล์เอกสารหลักฐาน
-        </div>
-        <div class="col-12"><q-separator /></div>
-        <div class="col-xs-12 q-pa-sm row">
-          <q-file
-            class="col-11 q-mt-sm"
-            for="#evidenceFiles"
-            outlined
-            dense
-            ref="evidenceFilesRef"
-            v-model="formData.evidenceFiles"
-            label="ไฟล์เอกสารหลักฐาน"
-            lazy-rules
-            :rules="[(val) => !!val || 'กรุณาเลือกไฟล์เอกสารหลักฐาน']"
-            hide-bottom-space
-          >
-            <template v-slot:prepend>
-              <q-icon name="attach_file" color="primary" />
-            </template>
-          </q-file>
-          <div class="col-1 self-center">
-            <q-btn
-              size="14px"
-              flat
-              round
-              dense
-              color="add"
-              class="q-ml-sm q-mt-sm"
-              icon="mdi-upload"
-              ><q-tooltip>อัปโหลดไฟล์</q-tooltip></q-btn
-            >
+
+  <q-card flat class="q-pa-md q-mt-sm">
+    <div class="col-12 row q-col-gutter-md">
+      <div class="row col-12">
+        <q-card bordered class="row col-12" style="border: 1px solid #d6dee1">
+          <div class="col-12 text-weight-medium bg-grey-1 q-py-sm q-px-md">
+            อัปโหลดไฟล์เอกสารหลักฐาน
          </div>
-        </div>
-        <div class="col-xs-12 q-pa-sm row">
-          <q-list bordered separator class="full-width">
-            <q-item
-              clickable
-              v-ripple
-              v-for="(file, index) in evidenceFiles"
-              :key="index"
+          <div class="col-12"><q-separator /></div>
+          <div class="col-xs-12 q-pa-sm row">
+            <q-file
+              class="col-11 q-mt-sm"
+              for="#evidenceFiles"
+              outlined
+              dense
+              ref="evidenceFilesRef"
+              v-model="formData.evidenceFiles"
+              label="ไฟล์เอกสารหลักฐาน"
+              lazy-rules
+              :rules="[(val) => !!val || 'กรุณาเลือกไฟล์เอกสารหลักฐาน']"
+              hide-bottom-space
            >
-              <q-item-section>{{ file.name + (index + 1) }}</q-item-section>
-              <q-item-section avatar>
-                <div class="row">
-                  <div>
-                    <q-btn
-                      dense
-                      flat
-                      round
-                      size="12px"
-                      color="blue"
-                      icon="mdi-download-outline"
-                    >
-                      <q-tooltip>ดาวน์โหลดเอกสารหลักฐาน</q-tooltip>
-                    </q-btn>
+              <template v-slot:prepend>
+                <q-icon name="attach_file" color="primary" />
+              </template>
+            </q-file>
+            <div class="col-1 self-center">
+              <q-btn
+                size="14px"
+                flat
+                round
+                dense
+                color="add"
+                class="q-ml-sm q-mt-sm"
+                icon="mdi-upload"
+                ><q-tooltip>อัปโหลดไฟล์</q-tooltip></q-btn
+              >
+            </div>
+          </div>
+          <div class="col-xs-12 q-pa-sm row">
+            <q-list bordered separator class="full-width">
+              <q-item
+                clickable
+                v-ripple
+                v-for="(file, index) in evidenceFiles"
+                :key="index"
+              >
+                <q-item-section>{{ file.name + (index + 1) }}</q-item-section>
+                <q-item-section avatar>
+                  <div class="row">
+                    <div>
+                      <q-btn
+                        dense
+                        flat
+                        round
+                        size="12px"
+                        color="blue"
+                        icon="mdi-download-outline"
+                      >
+                        <q-tooltip>ดาวน์โหลดเอกสารหลักฐาน</q-tooltip>
+                      </q-btn>
+                    </div>
+                    <div>
+                      <q-btn
+                        dense
+                        flat
+                        round
+                        size="12px"
+                        color="red"
+                        icon="mdi-delete-outline"
+                        ><q-tooltip>ลบเอกสารหลักฐาน</q-tooltip></q-btn
+                      >
+                    </div>
                  </div>
-                  <div>
-                    <q-btn
-                      dense
-                      flat
-                      round
-                      size="12px"
-                      color="red"
-                      icon="mdi-delete-outline"
-                      ><q-tooltip>ลบเอกสารหลักฐาน</q-tooltip></q-btn
-                    >
-                  </div>
-                </div>
-              </q-item-section>
-            </q-item>
-          </q-list>
-        </div>
-      </q-card>
+                </q-item-section>
+              </q-item>
+            </q-list>
+          </div>
+        </q-card>
+      </div>
    </div>
-  </div>
+  </q-card>

  <Dialogbody
    v-model:Modal="modal"
--- a/src/modules/11_discipline/components/2_InvestigateFacts/MainPage.vue
+++ b/src/modules/11_discipline/components/2_InvestigateFacts/MainPage.vue
@ -64,34 +64,13 @@ onMounted(async () => {
    {
      id: "001",
      subject: "ทุจริตในหน้าที่",
-      interrogated: "ศิรินภา คงน้อยี่",
-      fault: "1",
-      status: "0",
-      active: "1",
-    },
-    {
-      id: "002",
-      subject: "ทุจริตในหน้าที่",
-      interrogated: "นายนครชัย วันดี",
-      fault: "1",
-      status: "1",
-      active: "1",
-    },
-    {
-      id: "003",
-      subject: "กระทำทุจริตเงินกองทุน",
-      interrogated: "นายกัณฐิมา  กาฬสินธ์ุ",
-      fault: "0",
-      status: "1",
-      active: "1",
-    },
-    {
-      id: "004",
-      subject: "พูดจาไม่สุภาพ",
-      interrogated: "นายปิยรมย์ ศิริธาราฟ",
-      fault: "0",
-      status: "1",
-      active: "1",
+      interrogated: "บุคคล",
+      complaintOffenseDetails: "NOT_SPECIFIED",
+      investigationDetail: "appoint_directors",
+      startDate: new Date ("2023-11-20"),
+      endDate: new Date ("2023-11-25"),
+      statusResult: "not_specified",
+      status: "new"
    },
  ]);
 });
--- a/src/modules/11_discipline/components/3_InvestigateDisciplinary/Form.vue
+++ b/src/modules/11_discipline/components/3_InvestigateDisciplinary/Form.vue
@ -673,355 +673,369 @@ onMounted(async () => {
          </div>
        </q-card>

-        <div class="col-12 row q-col-gutter-md q-mt-sm">
-          <div class="row col-12">
-            <q-card
-              bordered
-              class="row col-12"
-              style="border: 1px solid #d6dee1"
-            >
-              <div
-                class="col-xs-12 col-sm-12 text-weight-medium bg-grey-1 q-py-xs q-px-md"
+        <q-card flat class="q-pa-md q-mt-sm">
+          <div class="col-12 row q-col-gutter-md">
+            <div class="row col-12">
+              <q-card
+                bordered
+                class="row col-12"
+                style="border: 1px solid #d6dee1"
              >
-                อัปโหลดหลักฐานสนับสนุนข้อกล่าวหา
-              </div>
-              <div class="col-12"><q-separator /></div>
-              <div class="col-xs-12 q-pa-sm row">
-                <q-file
-                  class="col-11 q-mt-sm"
-                  outlined
-                  dense
-                  ref="filesEvidenceRef"
-                  for="#filesEvidence"
-                  v-model="formData.filesEvidence"
-                  @added="fileUploadDoc"
-                  label="ไฟล์เอกสารหลักฐานสรุปพยานหลักฐานสนับสนุนข้อกล่าวหา"
-                  hide-bottom-space
-                  lazy-rules
-                  accept=".pdf,.xlsx,.doc"
+                <div
+                  class="col-12 text-weight-medium bg-grey-1 q-py-sm q-px-md"
                >
-                  <template v-slot:prepend>
-                    <q-icon name="attach_file" />
-                  </template>
-                </q-file>
-                <div class="col-1 self-center">
-                  <q-btn
-                    size="14px"
-                    flat
-                    round
-                    dense
-                    color="add"
-                    class="q-ml-sm q-mt-sm"
-                    icon="mdi-upload"
-                    ><q-tooltip>อัปโหลดไฟล์</q-tooltip></q-btn
-                  >
+                  อัปโหลดหลักฐานสนับสนุนข้อกล่าวหา
                </div>
-              </div>
-              <div class="col-xs-12 q-pa-sm row">
-                <q-list bordered separator class="full-width">
-                  <q-item
-                    clickable
-                    v-ripple
-                    v-for="(file, index) in filesEvidence"
-                    :key="index"
+                <div class="col-12"><q-separator /></div>
+                <div class="col-xs-12 q-pa-sm row">
+                  <q-file
+                    class="col-11 q-mt-sm"
+                    outlined
+                    dense
+                    ref="filesEvidenceRef"
+                    for="#filesEvidence"
+                    v-model="formData.filesEvidence"
+                    @added="fileUploadDoc"
+                    label="ไฟล์เอกสารหลักฐานสรุปพยานหลักฐานสนับสนุนข้อกล่าวหา"
+                    hide-bottom-space
+                    lazy-rules
+                    accept=".pdf,.xlsx,.doc"
                  >
-                    <q-item-section>{{
-                      file.name + (index + 1)
-                    }}</q-item-section>
-                    <q-item-section avatar>
-                      <div class="row">
-                        <div>
-                          <q-btn
-                            dense
-                            flat
-                            round
-                            size="12px"
-                            color="blue"
-                            icon="mdi-download-outline"
-                          >
-                            <q-tooltip>ดาวน์โหลดเอกสารหลักฐาน</q-tooltip>
-                          </q-btn>
+                    <template v-slot:prepend>
+                      <q-icon name="attach_file" />
+                    </template>
+                  </q-file>
+                  <div class="col-1 self-center">
+                    <q-btn
+                      size="14px"
+                      flat
+                      round
+                      dense
+                      color="add"
+                      class="q-ml-sm q-mt-sm"
+                      icon="mdi-upload"
+                      ><q-tooltip>อัปโหลดไฟล์</q-tooltip></q-btn
+                    >
+                  </div>
+                </div>
+                <div class="col-xs-12 q-pa-sm row">
+                  <q-list bordered separator class="full-width">
+                    <q-item
+                      clickable
+                      v-ripple
+                      v-for="(file, index) in filesEvidence"
+                      :key="index"
+                    >
+                      <q-item-section>{{
+                        file.name + (index + 1)
+                      }}</q-item-section>
+                      <q-item-section avatar>
+                        <div class="row">
+                          <div>
+                            <q-btn
+                              dense
+                              flat
+                              round
+                              size="12px"
+                              color="blue"
+                              icon="mdi-download-outline"
+                            >
+                              <q-tooltip>ดาวน์โหลดเอกสารหลักฐาน</q-tooltip>
+                            </q-btn>
+                          </div>
+                          <div>
+                            <q-btn
+                              dense
+                              flat
+                              round
+                              size="12px"
+                              color="red"
+                              icon="mdi-delete-outline"
+                              ><q-tooltip>ลบเอกสารหลักฐาน</q-tooltip></q-btn
+                            >
+                          </div>
                        </div>
-                        <div>
-                          <q-btn
-                            dense
-                            flat
-                            round
-                            size="12px"
-                            color="red"
-                            icon="mdi-delete-outline"
-                            ><q-tooltip>ลบเอกสารหลักฐาน</q-tooltip></q-btn
-                          >
-                        </div>
-                      </div>
-                    </q-item-section>
-                  </q-item>
-                </q-list>
-              </div>
-            </q-card>
+                      </q-item-section>
+                    </q-item>
+                  </q-list>
+                </div>
+              </q-card>
+            </div>
          </div>
+        </q-card>

-          <div class="row col-12">
-            <q-card
-              bordered
-              class="row col-12"
-              style="border: 1px solid #d6dee1"
-            >
-              <div
-                class="col-xs-12 col-sm-12 text-weight-medium bg-grey-1 q-py-xs q-px-md"
+        <q-card flat class="q-pa-md q-mt-sm">
+          <div class="col-12 row q-col-gutter-md">
+            <div class="row col-12">
+              <q-card
+                bordered
+                class="row col-12"
+                style="border: 1px solid #d6dee1"
              >
-                อัปโหลดบันทึกถ้อยคำของผู้กล่าวหา
-              </div>
-              <div class="col-12"><q-separator /></div>
-              <div class="col-xs-12 q-pa-sm row">
-                <q-file
-                  class="col-11 q-mt-sm"
-                  outlined
-                  dense
-                  ref="filesRecordAccuserRef"
-                  for="#filesRecordAccuser"
-                  v-model="formData.filesRecordAccuser"
-                  @added="fileUploadDoc"
-                  label="ไฟล์เอกสารบันทึกถ้อยคำของผู้กล่าวหา"
-                  hide-bottom-space
-                  lazy-rules
-                  accept=".pdf,.xlsx,.doc"
+                <div
+                  class="col-12 text-weight-medium bg-grey-1 q-py-sm q-px-md"
                >
-                  <template v-slot:prepend>
-                    <q-icon name="attach_file" />
-                  </template>
-                </q-file>
-                <div class="col-1 self-center">
-                  <q-btn
-                    size="14px"
-                    flat
-                    round
-                    dense
-                    color="add"
-                    class="q-ml-sm q-mt-sm"
-                    icon="mdi-upload"
-                    ><q-tooltip>อัปโหลดไฟล์</q-tooltip></q-btn
-                  >
+                  อัปโหลดบันทึกถ้อยคำของผู้กล่าวหา
                </div>
-              </div>
-              <div class="col-xs-12 q-pa-sm row">
-                <q-list bordered separator class="full-width">
-                  <q-item
-                    clickable
-                    v-ripple
-                    v-for="(file, index) in filesRecordAccuser"
-                    :key="index"
+                <div class="col-12"><q-separator /></div>
+                <div class="col-xs-12 q-pa-sm row">
+                  <q-file
+                    class="col-11 q-mt-sm"
+                    outlined
+                    dense
+                    ref="filesRecordAccuserRef"
+                    for="#filesRecordAccuser"
+                    v-model="formData.filesRecordAccuser"
+                    @added="fileUploadDoc"
+                    label="ไฟล์เอกสารบันทึกถ้อยคำของผู้กล่าวหา"
+                    hide-bottom-space
+                    lazy-rules
+                    accept=".pdf,.xlsx,.doc"
                  >
-                    <q-item-section>{{
-                      file.name + (index + 1)
-                    }}</q-item-section>
-                    <q-item-section avatar>
-                      <div class="row">
-                        <div>
-                          <q-btn
-                            dense
-                            flat
-                            round
-                            size="12px"
-                            color="blue"
-                            icon="mdi-download-outline"
-                          >
-                            <q-tooltip>ดาวน์โหลดเอกสารหลักฐาน</q-tooltip>
-                          </q-btn>
+                    <template v-slot:prepend>
+                      <q-icon name="attach_file" />
+                    </template>
+                  </q-file>
+                  <div class="col-1 self-center">
+                    <q-btn
+                      size="14px"
+                      flat
+                      round
+                      dense
+                      color="add"
+                      class="q-ml-sm q-mt-sm"
+                      icon="mdi-upload"
+                      ><q-tooltip>อัปโหลดไฟล์</q-tooltip></q-btn
+                    >
+                  </div>
+                </div>
+                <div class="col-xs-12 q-pa-sm row">
+                  <q-list bordered separator class="full-width">
+                    <q-item
+                      clickable
+                      v-ripple
+                      v-for="(file, index) in filesRecordAccuser"
+                      :key="index"
+                    >
+                      <q-item-section>{{
+                        file.name + (index + 1)
+                      }}</q-item-section>
+                      <q-item-section avatar>
+                        <div class="row">
+                          <div>
+                            <q-btn
+                              dense
+                              flat
+                              round
+                              size="12px"
+                              color="blue"
+                              icon="mdi-download-outline"
+                            >
+                              <q-tooltip>ดาวน์โหลดเอกสารหลักฐาน</q-tooltip>
+                            </q-btn>
+                          </div>
+                          <div>
+                            <q-btn
+                              dense
+                              flat
+                              round
+                              size="12px"
+                              color="red"
+                              icon="mdi-delete-outline"
+                              ><q-tooltip>ลบเอกสารหลักฐาน</q-tooltip></q-btn
+                            >
+                          </div>
                        </div>
-                        <div>
-                          <q-btn
-                            dense
-                            flat
-                            round
-                            size="12px"
-                            color="red"
-                            icon="mdi-delete-outline"
-                            ><q-tooltip>ลบเอกสารหลักฐาน</q-tooltip></q-btn
-                          >
-                        </div>
-                      </div>
-                    </q-item-section>
-                  </q-item>
-                </q-list>
-              </div>
-            </q-card>
+                      </q-item-section>
+                    </q-item>
+                  </q-list>
+                </div>
+              </q-card>
+            </div>
          </div>
+        </q-card>

-          <div class="row col-12">
-            <q-card
-              bordered
-              class="row col-12"
-              style="border: 1px solid #d6dee1"
-            >
-              <div
-                class="col-xs-12 col-sm-12 text-weight-medium bg-grey-1 q-py-xs q-px-md"
+        <q-card flat class="q-pa-md q-mt-sm">
+          <div class="col-12 row q-col-gutter-md">
+            <div class="row col-12">
+              <q-card
+                bordered
+                class="row col-12"
+                style="border: 1px solid #d6dee1"
              >
-                อัปโหลดพยานและการบันทึกถ้อยคำ
-              </div>
-              <div class="col-12"><q-separator /></div>
-              <div class="col-xs-12 q-pa-sm row">
-                <q-file
-                  class="col-11 q-mt-sm"
-                  outlined
-                  dense
-                  ref="filesWitnessesRef"
-                  for="#filesWitnesses"
-                  v-model="formData.filesWitnesses"
-                  @added="fileUploadDoc"
-                  label="ไฟล์เอกสารพยานและการบันทึกถ้อยคำ"
-                  hide-bottom-space
-                  lazy-rules
-                  accept=".pdf,.xlsx,.doc"
+                <div
+                  class="col-12 text-weight-medium bg-grey-1 q-py-sm q-px-md"
                >
-                  <template v-slot:prepend>
-                    <q-icon name="attach_file" />
-                  </template>
-                </q-file>
-                <div class="col-1 self-center">
-                  <q-btn
-                    size="14px"
-                    flat
-                    round
-                    dense
-                    color="add"
-                    class="q-ml-sm q-mt-sm"
-                    icon="mdi-upload"
-                    ><q-tooltip>อัปโหลดไฟล์</q-tooltip></q-btn
-                  >
+                  อัปโหลดพยานและการบันทึกถ้อยคำ
                </div>
-              </div>
-              <div class="col-xs-12 q-pa-sm row">
-                <q-list bordered separator class="full-width">
-                  <q-item
-                    clickable
-                    v-ripple
-                    v-for="(file, index) in filesWitnesses"
-                    :key="index"
+                <div class="col-12"><q-separator /></div>
+                <div class="col-xs-12 q-pa-sm row">
+                  <q-file
+                    class="col-11 q-mt-sm"
+                    outlined
+                    dense
+                    ref="filesWitnessesRef"
+                    for="#filesWitnesses"
+                    v-model="formData.filesWitnesses"
+                    @added="fileUploadDoc"
+                    label="ไฟล์เอกสารพยานและการบันทึกถ้อยคำ"
+                    hide-bottom-space
+                    lazy-rules
+                    accept=".pdf,.xlsx,.doc"
                  >
-                    <q-item-section>{{
-                      file.name + (index + 1)
-                    }}</q-item-section>
-                    <q-item-section avatar>
-                      <div class="row">
-                        <div>
-                          <q-btn
-                            dense
-                            flat
-                            round
-                            size="12px"
-                            color="blue"
-                            icon="mdi-download-outline"
-                          >
-                            <q-tooltip>ดาวน์โหลดเอกสารหลักฐาน</q-tooltip>
-                          </q-btn>
+                    <template v-slot:prepend>
+                      <q-icon name="attach_file" />
+                    </template>
+                  </q-file>
+                  <div class="col-1 self-center">
+                    <q-btn
+                      size="14px"
+                      flat
+                      round
+                      dense
+                      color="add"
+                      class="q-ml-sm q-mt-sm"
+                      icon="mdi-upload"
+                      ><q-tooltip>อัปโหลดไฟล์</q-tooltip></q-btn
+                    >
+                  </div>
+                </div>
+                <div class="col-xs-12 q-pa-sm row">
+                  <q-list bordered separator class="full-width">
+                    <q-item
+                      clickable
+                      v-ripple
+                      v-for="(file, index) in filesWitnesses"
+                      :key="index"
+                    >
+                      <q-item-section>{{
+                        file.name + (index + 1)
+                      }}</q-item-section>
+                      <q-item-section avatar>
+                        <div class="row">
+                          <div>
+                            <q-btn
+                              dense
+                              flat
+                              round
+                              size="12px"
+                              color="blue"
+                              icon="mdi-download-outline"
+                            >
+                              <q-tooltip>ดาวน์โหลดเอกสารหลักฐาน</q-tooltip>
+                            </q-btn>
+                          </div>
+                          <div>
+                            <q-btn
+                              dense
+                              flat
+                              round
+                              size="12px"
+                              color="red"
+                              icon="mdi-delete-outline"
+                              ><q-tooltip>ลบเอกสารหลักฐาน</q-tooltip></q-btn
+                            >
+                          </div>
                        </div>
-                        <div>
-                          <q-btn
-                            dense
-                            flat
-                            round
-                            size="12px"
-                            color="red"
-                            icon="mdi-delete-outline"
-                            ><q-tooltip>ลบเอกสารหลักฐาน</q-tooltip></q-btn
-                          >
-                        </div>
-                      </div>
-                    </q-item-section>
-                  </q-item>
-                </q-list>
-              </div>
-            </q-card>
+                      </q-item-section>
+                    </q-item>
+                  </q-list>
+                </div>
+              </q-card>
+            </div>
          </div>
+        </q-card>

-          <div class="row col-12">
-            <q-card
-              bordered
-              class="row col-12"
-              style="border: 1px solid #d6dee1"
-            >
-              <div
-                class="col-xs-12 col-sm-12 text-weight-medium bg-grey-1 q-py-xs q-px-md"
+        <q-card flat class="q-pa-md q-mt-sm">
+          <div class="col-12 row q-col-gutter-md">
+            <div class="row col-12">
+              <q-card
+                bordered
+                class="row col-12"
+                style="border: 1px solid #d6dee1"
              >
-                อัปโหลดไฟล์เอกสารหลักฐานอื่น ๆ
-              </div>
-              <div class="col-12"><q-separator /></div>
-              <div class="col-xs-12 q-pa-sm row">
-                <q-file
-                  class="col-11 q-mt-sm"
-                  outlined
-                  dense
-                  ref="filesEtcRef"
-                  for="#filesEtc"
-                  v-model="formData.filesEtc"
-                  @added="fileUploadDoc"
-                  label="ไฟล์เอกสารหลักฐานอื่น ๆ"
-                  hide-bottom-space
-                  lazy-rules
-                  accept=".pdf,.xlsx,.doc"
+                <div
+                  class="col-12 text-weight-medium bg-grey-1 q-py-sm q-px-md"
                >
-                  <template v-slot:prepend>
-                    <q-icon name="attach_file" />
-                  </template>
-                </q-file>
-                <div class="col-1 self-center">
-                  <q-btn
-                    size="14px"
-                    flat
-                    round
-                    dense
-                    color="add"
-                    class="q-ml-sm q-mt-sm"
-                    icon="mdi-upload"
-                    ><q-tooltip>อัปโหลดไฟล์</q-tooltip></q-btn
-                  >
+                  อัปโหลดไฟล์เอกสารหลักฐานอื่น ๆ
                </div>
-              </div>
-              <div class="col-xs-12 q-pa-sm row">
-                <q-list bordered separator class="full-width">
-                  <q-item
-                    clickable
-                    v-ripple
-                    v-for="(file, index) in filesEtc"
-                    :key="index"
+                <div class="col-12"><q-separator /></div>
+                <div class="col-xs-12 q-pa-sm row">
+                  <q-file
+                    class="col-11 q-mt-sm"
+                    outlined
+                    dense
+                    ref="filesEtcRef"
+                    for="#filesEtc"
+                    v-model="formData.filesEtc"
+                    @added="fileUploadDoc"
+                    label="ไฟล์เอกสารหลักฐานอื่น ๆ"
+                    hide-bottom-space
+                    lazy-rules
+                    accept=".pdf,.xlsx,.doc"
                  >
-                    <q-item-section>{{
-                      file.name + (index + 1)
-                    }}</q-item-section>
-                    <q-item-section avatar>
-                      <div class="row">
-                        <div>
-                          <q-btn
-                            dense
-                            flat
-                            round
-                            size="12px"
-                            color="blue"
-                            icon="mdi-download-outline"
-                          >
-                            <q-tooltip>ดาวน์โหลดเอกสารหลักฐาน</q-tooltip>
-                          </q-btn>
+                    <template v-slot:prepend>
+                      <q-icon name="attach_file" />
+                    </template>
+                  </q-file>
+                  <div class="col-1 self-center">
+                    <q-btn
+                      size="14px"
+                      flat
+                      round
+                      dense
+                      color="add"
+                      class="q-ml-sm q-mt-sm"
+                      icon="mdi-upload"
+                      ><q-tooltip>อัปโหลดไฟล์</q-tooltip></q-btn
+                    >
+                  </div>
+                </div>
+                <div class="col-xs-12 q-pa-sm row">
+                  <q-list bordered separator class="full-width">
+                    <q-item
+                      clickable
+                      v-ripple
+                      v-for="(file, index) in filesEtc"
+                      :key="index"
+                    >
+                      <q-item-section>{{
+                        file.name + (index + 1)
+                      }}</q-item-section>
+                      <q-item-section avatar>
+                        <div class="row">
+                          <div>
+                            <q-btn
+                              dense
+                              flat
+                              round
+                              size="12px"
+                              color="blue"
+                              icon="mdi-download-outline"
+                            >
+                              <q-tooltip>ดาวน์โหลดเอกสารหลักฐาน</q-tooltip>
+                            </q-btn>
+                          </div>
+                          <div>
+                            <q-btn
+                              dense
+                              flat
+                              round
+                              size="12px"
+                              color="red"
+                              icon="mdi-delete-outline"
+                              ><q-tooltip>ลบเอกสารหลักฐาน</q-tooltip></q-btn
+                            >
+                          </div>
                        </div>
-                        <div>
-                          <q-btn
-                            dense
-                            flat
-                            round
-                            size="12px"
-                            color="red"
-                            icon="mdi-delete-outline"
-                            ><q-tooltip>ลบเอกสารหลักฐาน</q-tooltip></q-btn
-                          >
-                        </div>
-                      </div>
-                    </q-item-section>
-                  </q-item>
-                </q-list>
-              </div>
-            </q-card>
+                      </q-item-section>
+                    </q-item>
+                  </q-list>
+                </div>
+              </q-card>
+            </div>
          </div>
-        </div>
+        </q-card>
      </div>
    </form>
  </div>
--- a/src/modules/11_discipline/components/3_InvestigateDisciplinary/MainPage.vue
+++ b/src/modules/11_discipline/components/3_InvestigateDisciplinary/MainPage.vue
@ -4,7 +4,7 @@ import { useQuasar } from "quasar";
 import { useRouter } from "vue-router";
 import Table from "@/modules/11_discipline/components/3_InvestigateDisciplinary/Table.vue";
 import { useCounterMixin } from "@/stores/mixin";
-import { useInvestigateDisStore } from "../../store/InvestigateDisStore";
+import { useInvestigateDisStore } from "@/modules/11_discipline/store/InvestigateDisStore";
 import type { Pagination } from "@/modules/03_recruiting/interface/index/Main";

 const $q = useQuasar(); // show dialog
@ -117,17 +117,6 @@ onMounted(async () => {
                {{ col.value }}
              </div>
            </q-td>
-            <q-td style="font-size: 14px; width: 10rem">
-              <q-btn
-                v-if="props.row.active === 'ยืนยันผล'"
-                color="primary"
-                class="q-px-md"
-                dense
-                unelevated
-                >ยืนยันผล</q-btn
-              >
-              <span v-else>{{ props.row.active }}</span>
-            </q-td>
          </q-tr>
        </template>
      </Table>
--- a/src/modules/11_discipline/components/3_InvestigateDisciplinary/Table.vue
+++ b/src/modules/11_discipline/components/3_InvestigateDisciplinary/Table.vue
@ -133,7 +133,6 @@ function resetFilter() {
        <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-th auto-width v-if="nornmalData == true" />
      </q-tr>
    </template>
    <template #body="props">
--- a/src/modules/11_discipline/components/6_BasicInformation/Director/Form.vue
+++ b/src/modules/11_discipline/components/6_BasicInformation/Director/Form.vue
@ -245,6 +245,8 @@ function onValidate() {
              label="เบอร์โทร"
              ref="phoneRef"
              for="phoneRef"
+              type="tel"
+              mask="##########"
              hide-bottom-space
              :rules="[(val: string) => !!val || `${'กรุณากรอกเบอร์โทร'}`]"
            />
--- a/src/modules/11_discipline/interface/index/Main.ts
+++ b/src/modules/11_discipline/interface/index/Main.ts
@ -8,13 +8,15 @@ interface DataNumberOption {
  name: string;
 }

-interface investigatefactsDataRowType {
+interface InvestigatefactsDataRowType {
  id:string,
  subject: string;
  interrogated: string;
-  fault: string | undefined;
-  status: string | undefined;
-  active: string | undefined;
+  complaintOffenseDetails: string,
+  investigationDetail: string,
+  dateInvestigate: string,
+  statusResult: string,
+  status: string
 }

 interface investigateDisDataRowType {
@ -40,7 +42,7 @@ interface directorType {

 export type {
  DataOption,
-  investigatefactsDataRowType,
+  InvestigatefactsDataRowType,
  investigateDisDataRowType,
  directorType,
  DataNumberOption
--- a/src/modules/11_discipline/interface/request/investigate.ts
+++ b/src/modules/11_discipline/interface/request/investigate.ts
@ -14,6 +14,7 @@ interface FormData {
  statusResult: string;
  causeText: string;
  complaintStatus:string
+  reason: string
 }
 interface MyObjectInvestigateRef {
  complaint: object | null;
@ -28,6 +29,7 @@ interface MyObjectInvestigateRef {
  daysExtend: object | null;
  statusResult: object | null;
  causeText: object | null;
+  reason: object | null;
  [key: string]: any;
 }
 export type { FormData, MyObjectInvestigateRef };
--- a/src/modules/11_discipline/interface/request/investigateFact.ts
+++ b/src/modules/11_discipline/interface/request/investigateFact.ts
@ -0,0 +1,35 @@
+interface FormData {
+  complaint: string;
+  complaintdetail: string;
+  detail: string;
+  fault: string;
+  other: string;
+  evidenceFiles: File | null;
+  fileComplaint: File | null;
+  clickTime: boolean;
+  date: Date | null;
+  dateEnd: Date;
+  daysExtend: number | null;
+  investigation: string;
+  statusResult: string;
+  causeText: string;
+  complaintStatus:string
+  reason: string
+}
+interface MyObjectInvestigateRef {
+  complaint: object | null;
+  complaintdetail: object | null;
+  detail: object | null;
+  fault: object | null;
+  evidenceFiles: object | null;
+  fileComplaint: object | null;
+  date: object | null;
+  dateEnd: object | null;
+  investigation: object | null;
+  daysExtend: object | null;
+  statusResult: object | null;
+  causeText: object | null;
+  reason: object | null;
+  [key: string]: any;
+}
+export type { FormData, MyObjectInvestigateRef };
--- a/src/modules/11_discipline/interface/response/investigate.ts
+++ b/src/modules/11_discipline/interface/response/investigate.ts
@ -0,0 +1,13 @@
+interface ListData {
+  id: string;
+  subject: string;
+  interrogated: string;
+  complaintOffenseDetails: string;
+  investigationDetail: string;
+  startDate: Date | null;
+  endDate: Date | null;
+  statusResult: string;
+  status: string;
+}
+
+export type { ListData };
--- a/src/modules/11_discipline/store/InvestigateFactStore.ts
+++ b/src/modules/11_discipline/store/InvestigateFactStore.ts
@ -1,18 +1,23 @@
 import { defineStore } from "pinia";
 import { ref } from "vue";
+import { useCounterMixin } from "@/stores/mixin";
+
 import type { QTableProps } from "quasar";
 import type {
-  investigatefactsDataRowType,
+  InvestigatefactsDataRowType,
  DataOption,
  DataNumberOption,
 } from "@/modules/11_discipline/interface/index/Main";
+import type { ListData } from "@/modules/11_discipline/interface/response/investigate";
+
+const mixin = useCounterMixin();
+const { date2Thai } = mixin;

 /*** store ของข้อมูลสืบสวนข้อเท็จจริง */
 export const useInvestigateFactStore = defineStore(
  "DisciplineInvestigateFact",
  () => {
    const tabMenu = ref<string>("investigatefacts");
-    const rows = ref<investigatefactsDataRowType[]>([]);

    const daysExtendOps = ref<DataNumberOption[]>([
      { id: 15, name: "15 วัน" },
@ -20,15 +25,21 @@ export const useInvestigateFactStore = defineStore(
      { id: 45, name: "45 วัน" },
      { id: 60, name: "60 วัน" },
    ]);
+
+    const offenseDetailsOps = ref<DataOption[]>([
+      { id: "NOT_SPECIFIED", name: "ยังไม่ระบุ" },
+      { id: "NOT_DEADLY", name: "ไม่ร้ายแรง" },
+      { id: "DEADLY", name: "ร้ายแรง" },
+    ]);
    const investigationOps = ref<DataOption[]>([
-      { id: "001", name: "แต่งตั้งกรรมการสืบสวน" },
-      { id: "002", name: "สืบสวนทางลับ" },
-      { id: "003", name: "อื่นๆ" },
+      { id: "appoint_directors", name: "แต่งตั้งกรรมการสืบสวน" },
+      { id: "secret_investigation", name: "สืบสวนทางลับ" },
+      { id: "other", name: "อื่นๆ" },
    ]);
    const faultOps = ref<DataOption[]>([
-      { id: "001", name: "ยังไม่ระบุ" },
-      { id: "002", name: "ไม่ร้ายเเรง" },
-      { id: "003", name: "ร้ายเเรง" },
+      { id: "new", name: "กำลังสืบสวน" },
+      { id: "stop", name: "ยุติเรื่อง" },
+      { id: "complete", name: "ส่งไปสอบสวน" },
    ]);
    const statusResultOptions = ref<DataOption[]>([
      { id: "not_specified", name: "ยังไม่ระบุ" },
@ -47,7 +58,10 @@ export const useInvestigateFactStore = defineStore(
      "no",
      "subject",
      "interrogated",
-      "fault",
+      "complaintOffenseDetails",
+      "investigationDetail",
+      "dateInvestigate",
+      "statusResult",
      "status",
    ]);

@ -65,7 +79,7 @@ export const useInvestigateFactStore = defineStore(
      {
        name: "subject",
        align: "left",
-        label: "เรื่อง",
+        label: "เรื่องร้องเรียน",
        sortable: true,
        field: "subject",
        headerStyle: "font-size: 14px",
@ -83,11 +97,44 @@ export const useInvestigateFactStore = defineStore(
          a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
      },
      {
-        name: "fault",
+        name: "complaintOffenseDetails",
        align: "left",
        label: "ลักษณะความผิด",
        sortable: true,
-        field: "fault",
+        field: "complaintOffenseDetails",
+        headerStyle: "font-size: 14px",
+        style: "font-size: 14px",
+        sort: (a: string, b: string) =>
+          a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+      },
+      {
+        name: "investigationDetail",
+        align: "left",
+        label: "ลักษณะการสืบสวน",
+        sortable: true,
+        field: "investigationDetail",
+        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",
+        sort: (a: string, b: string) =>
+          a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+      },
+      {
+        name: "statusResult",
+        align: "left",
+        label: "ผลการสืบสวน",
+        sortable: true,
+        field: "statusResult",
        headerStyle: "font-size: 14px",
        style: "font-size: 14px",
        sort: (a: string, b: string) =>
@ -103,6 +150,7 @@ export const useInvestigateFactStore = defineStore(
        style: "font-size: 14px",
      },
    ]);
+
    function filterFnOptionsType(
      val: string | number,
      update: any,
@ -124,45 +172,51 @@ export const useInvestigateFactStore = defineStore(
        }
      });
    }
-    function fecthList(data: investigatefactsDataRowType[]) {
-      let datalist: investigatefactsDataRowType[] = data.map(
-        (e: investigatefactsDataRowType) => {
-          return {
-            id: e.id,
-            subject: e.subject,
-            interrogated: e.interrogated,
-            fault: e.fault ? convertFault(e.fault) : "-",
-            status: e.status ? convertSatatus(e.status) : "-",
-            active: e.active ? activeStatus(e.active) : "-",
-          };
-        }
-      );
-      rows.value = datalist;
+
+    const rows = ref<InvestigatefactsDataRowType[]>();
+    async function fecthList(data: ListData[]) {
+      rows.value = await data.map((e: ListData) => {
+        return {
+          id: e.id,
+          subject: e.subject,
+          interrogated: e.interrogated,
+          complaintOffenseDetails: convertOffenseDetails(
+            e.complaintOffenseDetails
+          ),
+          investigationDetail: convertInvestigationDetail(
+            e.investigationDetail
+          ),
+          dateInvestigate:
+            e.startDate && e.endDate
+              ? `${date2Thai(e.startDate)} - ${date2Thai(e.endDate)}`
+              : "-",
+          statusResult: activeStatusResult(e.statusResult),
+          status: convertStatus(e.status),
+        };
+      });
    }
-    function convertFault(val: string) {
-      switch (val) {
-        case "0":
-          return "ความผิดวินัยไม่ร้ายแรง";
-        case "1":
-          return "ความผิดวินัยร้ายแรง";
-      }
+
+    function convertOffenseDetails(val: string) {
+      const result = offenseDetailsOps.value.find((x: any) => x.id == val)?.name;
+      return result ? result : "-";
    }
-    function convertSatatus(val: string) {
-      switch (val) {
-        case "0":
-          return "ยุติเรื่อง";
-        case "1":
-          return "เสร็จสิ้นเเล้ว";
-      }
+
+    function convertInvestigationDetail(val: string) {
+      const result = investigationOps.value.find((x: any) => x.id == val)?.name;
+      return result ? result : "-";
    }
-    function activeStatus(val: string) {
-      switch (val) {
-        case "0":
-          return "ยังไม่ได้ยืนยันผล";
-        case "1":
-          return "ยืนยันผลเเล้ว";
-      }
+
+    function convertStatus(val: string) {
+      const result = faultOps.value.find((x: any) => x.id == val)?.name;
+      return result ? result : "-";
    }
+    function activeStatusResult(val: string) {
+      const result = statusResultOptions.value.find(
+        (x: any) => x.id == val
+      )?.name;
+      return result ? result : "-";
+    }
+
    return {
      tabMenu,
      fecthList,