From 52e7ef15412674d40a3cf5c0dc7a44473bd80d08 Mon Sep 17 00:00:00 2001
From: setthawutttty <stw.ttty@gmail.com>
Date: Mon, 6 Nov 2023 15:13:36 +0700
Subject: [PATCH] =?UTF-8?q?=E0=B9=80=E0=B9=80=E0=B8=81=E0=B9=89=20UI?=
 =?UTF-8?q?=E0=B8=A3=E0=B8=B2=E0=B8=A2=E0=B8=81=E0=B8=B2=E0=B8=A3=E0=B8=AA?=
 =?UTF-8?q?=E0=B8=B7=E0=B8=9A=E0=B8=AA=E0=B8=A7=E0=B8=99=E0=B8=82=E0=B9=89?=
 =?UTF-8?q?=E0=B8=AD=E0=B9=80=E0=B8=97=E0=B9=87=E0=B8=88=E0=B8=88=E0=B8=A3?=
 =?UTF-8?q?=E0=B8=B4=E0=B8=87?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/2_InvestigateFacts/AddPage.vue | 485 +-----------------
 .../2_InvestigateFacts/EditPage.vue           |  72 +++
 .../components/2_InvestigateFacts/Form.vue    | 469 +++++++++++++++++
 .../2_InvestigateFacts/MainPage.vue           |  33 +-
 .../11_discipline/interface/index/Main.ts     |   1 +
 .../interface/request/director.ts             |   1 +
 src/modules/11_discipline/router.ts           |  12 +
 .../store/InvestigateFactStore.ts             |   1 +
 8 files changed, 605 insertions(+), 469 deletions(-)
 create mode 100644 src/modules/11_discipline/components/2_InvestigateFacts/EditPage.vue
 create mode 100644 src/modules/11_discipline/components/2_InvestigateFacts/Form.vue

diff --git a/src/modules/11_discipline/components/2_InvestigateFacts/AddPage.vue b/src/modules/11_discipline/components/2_InvestigateFacts/AddPage.vue
index d92db89a6..d45ed6d06 100644
--- a/src/modules/11_discipline/components/2_InvestigateFacts/AddPage.vue
+++ b/src/modules/11_discipline/components/2_InvestigateFacts/AddPage.vue
@@ -1,467 +1,32 @@
 <script setup lang="ts">
-import router from "@/router";
-import { onMounted, ref, watch, reactive } from "vue";
-import { useQuasar } from "quasar";
-import { useCounterMixin } from "@/stores/mixin";
-import { useInvestigateFactStore } from "@/modules/11_discipline/store/InvestigateFactStore";
-import type {
-  FormData,
-  MyObjectInvestigateRef,
-} from "@/modules/11_discipline/interface/request/investigate";
-const investigateFactStore = useInvestigateFactStore();
-const { filterFnOptionsType } = investigateFactStore;
+import Form from "@/modules/11_discipline/components/2_InvestigateFacts/Form.vue";
+import { useRoute, useRouter } from "vue-router";
+const router = useRouter();
 
-const mixin = useCounterMixin();
-const {
-  messageError,
-  showLoader,
-  hideLoader,
-  date2Thai,
-  dialogConfirm,
-  success,
-} = mixin;
-const $q = useQuasar();
-const complaintRef = ref<Object | null>(null);
-const complaintdetailRef = ref<Object | null>(null);
-const detailRef = ref<Object | null>(null);
-const faultRef = ref<Object | null>(null);
-const resultsRef = ref<Object | null>(null);
-const otherRef = ref<Object | null>(null);
-const evidenceFilesRef = ref<Object | null>(null);
-const fileComplaintRef = ref<Object | null>(null);
-const clickTimeRef = ref<Object | null>(null);
-const dateRef = ref<Object | null>(null);
-const dateEndRef = ref<Object | null>(null);
-const investigationRef = ref<Object | null>(null);
-const daysExtendRef = ref<Object | null>(null);
-const formData = reactive<FormData>({
-  complaint: "",
-  complaintdetail: "",
-  detail: "",
-  fault: "",
-  results: "",
-  other: "",
-  evidenceFiles: null,
-  fileComplaint: null,
-  clickTime: false,
-  date: null,
-  dateEnd: null,
-  investigation: "",
-  daysExtend: "",
-});
-const objectInvestigate: MyObjectInvestigateRef = {
-  complaint: complaintRef,
-  complaintdetail: complaintdetailRef,
-  detail: detailRef,
-  fault: faultRef,
-  results: resultsRef,
-  other: otherRef,
-  evidenceFiles: evidenceFilesRef,
-  fileComplaint: fileComplaintRef,
-  date: dateRef,
-  dateEnd: dateEndRef,
-  investigation: investigationRef,
-  daysExtend: daysExtendRef,
+// บันทึกข้อมูล
+const onSubmit = async () => {
+  // post
+  console.log("add");
+  router.push(`/discipline/investigatefacts`);
 };
-
-function validateForm() {
-  const hasError = [];
-  for (const key in objectInvestigate) {
-    if (Object.prototype.hasOwnProperty.call(objectInvestigate, key)) {
-      const property = objectInvestigate[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("ไม่ผ่าน ");
-    console.log(hasError);
-  }
-}
-function onSubmit() {
-  dialogConfirm(
-    $q,
-    async () => {
-      console.log(formData);
-    },
-    "ยืนยันการบันทึกข้อมูล",
-    "ต้องการยืนยันการบันทึกข้อมูลนี้หรือไม่ ?"
-  );
-}
 </script>
 <template>
-  <div class="toptitle text-dark col-12 row items-center">
-    <q-btn
-    for="#backMaininvestigate"
-      icon="mdi-arrow-left"
-      unelevated
-      round
-      dense
-      flat
-      color="primary"
-      class="q-mr-sm"
-      @click="router.go(-1)"
-    />
-    เพิ่มรายการสืบสวนข้อเท็จจริง
-  </div>
-  <q-card flat bordered class="col-12 q-mt-sm">
-    <div class="q-pa-md">
-      <form @submit.prevent="validateForm">
-        <div class="row col-12">
-          <div class="col-12 row bg-white q-col-gutter-md">
-            <div class="col-xs-12 row items-center">
-              <div class="col-12">
-                <q-input
-                  for="#complaint"
-                  class="full-width inputgreen cursor-pointer"
-                  ref="complaintRef"
-                  outlined
-                  dense
-                  lazy-rules
-                  borderless
-                  v-model="formData.complaint"
-                  :rules="[(val) => !!val || `${'กรุณากรอกเรื่องร้องเรียน'}`]"
-                  hide-bottom-space
-                  :label="`${'เรื่องร้องเรียน'}`"
-                  type="textarea"
-                />
-              </div>
-              <div class="row no-wrap col-12">
-                <div class="col-4 q-my-md q-mr-xs">
-                  <q-select
-                    for="#fault"
-                    outlined
-                    dense
-                    ref="faultRef"
-                    v-model="formData.fault"
-                    :rules="[(val) => !!val || `${'กรุณาเลือกลักษณะความผิด'}`]"
-                    :options="investigateFactStore.faultOp"
-                    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>
-                <div class="col-4 q-my-md q-mr-xs">
-                  <q-select
-                    for="#investigation"
-                    outlined
-                    dense
-                    ref="investigationRef"
-                    :rules="[
-                      (val) => !!val || `${'กรุณาเลือกลักษณะการสืบสวน'}`,
-                    ]"
-                    v-model="formData.investigation"
-                    :options="investigateFactStore.investigationOp"
-                    label="ลักษณะการสืบสวน"
-                    emit-value
-                    map-options
-                    option-label="name"
-                    option-value="id"
-                    use-input
-                    @filter="(inputValue: any,
-            doneFn: Function) => filterFnOptionsType(inputValue, doneFn, 'investigationOp'
-            )"
-                    ><template v-slot:no-option>
-                      <q-item>
-                        <q-item-section class="text-grey">
-                          ไม่มีข้อมูล
-                        </q-item-section>
-                      </q-item>
-                    </template>
-                  </q-select>
-                </div>
-              </div>
-              <div
-                v-if="formData.investigation === '003'"
-                class="col-12 q-mb-md"
-              >
-                <q-input
-                  for="#other"
-                  class="full-width inputgreen cursor-pointer"
-                  outlined
-                  ref="otherRef"
-                  dense
-                  borderless
-                  v-model="formData.other"
-                  hide-bottom-space
-                  :label="`${'รายการอื่นๆ(โปรดระบุ)'}`"
-                  type="textarea"
-                  :rules="[
-                    (val) =>
-                      formData.investigation === '003'
-                        ? !!val || 'กรุณาเลือกจำนวนวันที่ต้องการขยาย'
-                        : true,
-                  ]"
-                />
-              </div>
-
-              <div class="row items-start col-12">
-                <p
-                  class="text-weight-medium q-ma-none text-center align-top q-pt-sm"
-                >
-                  วันที่สืบสวน
-                </p>
-                <q-checkbox
-                  for="#clickTime"
-                  size="md"
-                  v-model="formData.clickTime"
-                  label="ขยายเวลา"
-                  color="primary"
-                  class="text-weight-medium q-ml-sm"
-                  keep-color
-                />
-                <div v-if="formData.clickTime !== true" class="self-start row">
-                  <div class="q-mx-xs">
-                    <datepicker
-                      menu-class-name="modalfix"
-                      v-model="formData.date"
-                      :locale="'th'"
-                      autoApply
-                      :enableTimePicker="false"
-                      week-start="0"
-                    >
-                      <template #year="{ year }">{{ year + 543 }}</template>
-                      <template #year-overlay-value="{ value }">{{
-                        parseInt(value + 543)
-                      }}</template>
-                      <template #trigger>
-                        <q-input
-                          for="#date"
-                          class="full-width inputgreen cursor-pointer"
-                          ref="dateRef"
-                          outlined
-                          dense
-                          lazy-rules
-                          borderless
-                          :model-value="
-                            formData.date ? date2Thai(formData.date) : null
-                          "
-                          :rules="[
-                            (val) =>
-                              !!val || `${'กรุณาเลือกวันที่เริ่มการสอบสวน'}`,
-                          ]"
-                          :label="`${'วันที่เริ่มการสอบสวน'}`"
-                        >
-                          <template v-slot:prepend>
-                            <q-icon
-                              name="event"
-                              class="cursor-pointer"
-                              color="primary"
-                            >
-                            </q-icon>
-                          </template>
-                        </q-input>
-                      </template>
-                    </datepicker>
-                  </div>
-                  <div class="q-mx-xs q-">
-                    <datepicker
-                      menu-class-name="modalfix"
-                      v-model="formData.dateEnd"
-                      :locale="'th'"
-                      autoApply
-                      :enableTimePicker="false"
-                      week-start="0"
-                    >
-                      <template #year="{ year }">{{ year + 543 }}</template>
-                      <template #year-overlay-value="{ value }">{{
-                        parseInt(value + 543)
-                      }}</template>
-                      <template #trigger>
-                        <q-input
-                          for="#dateEnd"
-                          ref="dateEndRef"
-                          class="full-width inputgreen cursor-pointer"
-                          outlined
-                          dense
-                          lazy-rules
-                          borderless
-                          :model-value="
-                            formData.dateEnd
-                              ? date2Thai(formData.dateEnd)
-                              : null
-                          "
-                          :rules="[
-                            (val) =>
-                              !!val || `${'กรุณาเลือกวันที่สิ้นสุดการสอบสวน'}`,
-                          ]"
-                          :label="`${'วันที่สิ้นสุดการสอบสวน'}`"
-                        >
-                          <template v-slot:prepend>
-                            <q-icon
-                              name="event"
-                              class="cursor-pointer"
-                              color="primary"
-                            >
-                            </q-icon>
-                          </template>
-                        </q-input>
-                      </template>
-                    </datepicker>
-                  </div>
-                </div>
-                <div v-else class="q-mx-xs">
-                  <q-select
-                    for="#daysExtend"
-                    outlined
-                    dense
-                    lazy-rules
-                    ref="daysExtendRef"
-                    v-model="formData.daysExtend"
-                    :options="investigateFactStore.daysExtendOp"
-                    label="จำนวนวันที่ต้องการขยาย"
-                    emit-value
-                    map-options
-                    :rules="[
-                      (val) =>
-                        formData.clickTime === true
-                          ? !!val || 'กรุณาเลือกจำนวนวันที่ต้องการขยาย'
-                          : true,
-                    ]"
-                    option-label="name"
-                    option-value="id"
-                    use-input
-                    @filter="(inputValue: any,
-            doneFn: Function) => filterFnOptionsType(inputValue, doneFn, 'daysExtendOp'
-            )"
-                    ><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="col-12 q-my-xs">
-                <q-input
-                  for="#complaintdetail"
-                  class="full-width inputgreen cursor-pointer"
-                  outlined
-                  ref="complaintdetailRef"
-                  dense
-                  lazy-rules
-                  borderless
-                  v-model="formData.complaintdetail"
-                  :rules="[
-                    (val) => !!val || `${'กรุณากรอกรายละเอียดเรื่องร้องเรียน'}`,
-                  ]"
-                  hide-bottom-space
-                  :label="`${'รายละเอียดเรื่องร้องเรียน'}`"
-                  type="textarea"
-                />
-              </div>
-              <div class="col-12 q-my-sm">
-                <q-file
-                  for="#fileComplaint"
-                  outlined
-                  ref="fileComplaintRef"
-                  dense
-                  v-model="formData.fileComplaint"
-                  label="ไฟล์เอกสารหลักฐานเรื่องร้องเรียน"
-                  lazy-rules
-                  :rules="[(val) => !!val || 'กรุณาเลือกไฟล์หลักฐานการรับ']"
-                  hide-bottom-space
-                >
-                  <template v-slot:prepend>
-                    <q-icon name="attach_file" color="primary" />
-                  </template>
-                </q-file>
-              </div>
-              <div class="col-12 q-my-sm">
-                <q-input
-                  for="#detail"
-                  class="full-width inputgreen cursor-pointer"
-                  outlined
-                  ref="detailRef"
-                  dense
-                  lazy-rules
-                  borderless
-                  v-model="formData.detail"
-                  :rules="[(val) => !!val || `${'กรุณากรอกรายละเอียด'}`]"
-                  hide-bottom-space
-                  :label="`${'รายละเอียด'}`"
-                  type="textarea"
-                />
-              </div>
-              <div class="col-12 q-my-xs">
-                <q-file
-                  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>
-              <div class="row col-12 items-start q-mt-sm">
-                <div class="col-4">
-                  <q-input
-                    for="#results"
-                    standout
-                    dense
-                    ref="resultsRef"
-                    :rules="[(val) => !!val || `${'กรุณากรอกผลการสืบสวน'}`]"
-                    v-model="formData.results"
-                    outlined
-                    debounce="300"
-                    placeholder="ผลการสืบสวน"
-                  >
-                  </q-input>
-                </div>
-                <div class="col-4">
-                  <q-btn
-                    id="#confirm"
-                    label="ยืนยันผลการสืบสวน"
-                    color="public"
-                    class="q-py-sm q-ml-sm"
-                  >
-                    <q-tooltip>ยืนยันผลการสืบสวน</q-tooltip>
-                  </q-btn>
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-        <q-separator />
-        <div class="row col-12 q-pa-sm">
-          <q-space />
-          <q-btn
-            id="onSubmit"
-            type="submit"
-            flat
-            round
-            color="secondary"
-            icon="mdi-content-save-outline"
-            ><q-tooltip>บับทึกข้อมูล</q-tooltip></q-btn
-          >
-        </div>
-      </form>
+  <div class="col-xs-12 col-sm-12 col-md-11">
+    <div class="toptitle text-dark col-12 row items-center">
+      <q-btn
+        for="#backMaininvestigate"
+        icon="mdi-arrow-left"
+        unelevated
+        round
+        dense
+        flat
+        color="primary"
+        class="q-mr-sm"
+        @click="router.go(-1)"
+      />
+      เพิ่มรายการสืบสวนข้อเท็จจริง
     </div>
-  </q-card>
+
+    <Form :on-submit="onSubmit" />
+  </div>
 </template>
diff --git a/src/modules/11_discipline/components/2_InvestigateFacts/EditPage.vue b/src/modules/11_discipline/components/2_InvestigateFacts/EditPage.vue
new file mode 100644
index 000000000..0e9f1fbc9
--- /dev/null
+++ b/src/modules/11_discipline/components/2_InvestigateFacts/EditPage.vue
@@ -0,0 +1,72 @@
+<script setup lang="ts">
+import { onMounted, reactive, ref } from "vue";
+import Form 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";
+
+const router = useRouter();
+const route = useRoute();
+const id = ref<string>(route.params.id as string);
+onMounted(() => {
+  fetchData();
+});
+
+// get ข้อมูลเก่ากรณีแก้ไขข้อมูล
+const data = reactive<FormData>({
+  complaint: "",
+  complaintdetail: "",
+  detail: "",
+  fault: "",
+  results: "",
+  other: "",
+  evidenceFiles: null,
+  fileComplaint: null,
+  clickTime: false,
+  date: null,
+  dateEnd: null,
+  investigation: "",
+  daysExtend: "",
+});
+const fetchData = async () => {
+  // ดึงค่าจาก api
+  data.complaint = "เรื่องที่ 1";
+  data.complaintdetail = "รายละเอียด";
+  data.detail = "รายละเอียด";
+  data.fault = "001";
+  data.results = "test";
+  data.other = "";
+  data.evidenceFiles = null;
+  data.fileComplaint = null;
+  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.daysExtend = "";
+};
+
+// แก้ไขข้อมูล
+const onSubmit = async (id: string) => {
+  // put
+  console.log("edit");
+  router.push(`/discipline/investigatefacts`);
+};
+</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/investigatefacts`)"
+      />
+      แก้ไขรายการสืบสวนข้อเท็จจริง {{ id }}#id
+    </div>
+
+    <Form :on-submit="onSubmit" :data="data" />
+  </div>
+</template>
diff --git a/src/modules/11_discipline/components/2_InvestigateFacts/Form.vue b/src/modules/11_discipline/components/2_InvestigateFacts/Form.vue
new file mode 100644
index 000000000..e45ff916e
--- /dev/null
+++ b/src/modules/11_discipline/components/2_InvestigateFacts/Form.vue
@@ -0,0 +1,469 @@
+<script setup lang="ts">
+import router from "@/router";
+import { onMounted, ref, watch, reactive } from "vue";
+import { useQuasar } from "quasar";
+import { useCounterMixin } from "@/stores/mixin";
+import { useInvestigateFactStore } from "@/modules/11_discipline/store/InvestigateFactStore";
+import type {
+  FormData,
+  MyObjectInvestigateRef,
+} from "@/modules/11_discipline/interface/request/investigate";
+const investigateFactStore = useInvestigateFactStore();
+const { filterFnOptionsType } = investigateFactStore;
+
+const mixin = useCounterMixin();
+const { date2Thai, dialogConfirm } = mixin;
+
+const props = defineProps({
+  data: {
+    type: Object,
+    default: null,
+  },
+  onSubmit: {
+    type: Function,
+    default: () => "",
+  },
+});
+
+const $q = useQuasar();
+
+const complaintRef = ref<Object | null>(null);
+const complaintdetailRef = ref<Object | null>(null);
+const detailRef = ref<Object | null>(null);
+const faultRef = ref<Object | null>(null);
+const resultsRef = ref<Object | null>(null);
+const otherRef = ref<Object | null>(null);
+const evidenceFilesRef = ref<Object | null>(null);
+const fileComplaintRef = ref<Object | null>(null);
+const clickTimeRef = ref<Object | null>(null);
+const dateRef = ref<Object | null>(null);
+const dateEndRef = ref<Object | null>(null);
+const investigationRef = ref<Object | null>(null);
+const daysExtendRef = ref<Object | null>(null);
+const formData = reactive<FormData>({
+  complaint: "",
+  complaintdetail: "",
+  detail: "",
+  fault: "",
+  results: "",
+  other: "",
+  evidenceFiles: null,
+  fileComplaint: null,
+  clickTime: false,
+  date: null,
+  dateEnd: null,
+  investigation: "",
+  daysExtend: "",
+});
+const objectInvestigate: MyObjectInvestigateRef = {
+  complaint: complaintRef,
+  complaintdetail: complaintdetailRef,
+  detail: detailRef,
+  fault: faultRef,
+  results: resultsRef,
+  other: otherRef,
+  evidenceFiles: evidenceFilesRef,
+  fileComplaint: fileComplaintRef,
+  date: dateRef,
+  dateEnd: dateEndRef,
+  investigation: investigationRef,
+  daysExtend: daysExtendRef,
+};
+
+function validateForm() {
+  const hasError = [];
+  for (const key in objectInvestigate) {
+    if (Object.prototype.hasOwnProperty.call(objectInvestigate, key)) {
+      const property = objectInvestigate[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("ไม่ผ่าน ");
+    console.log(hasError);
+  }
+}
+function onSubmit() {
+  dialogConfirm(
+    $q,
+    async () => {
+      console.log(formData);
+      props.onSubmit();
+    },
+    "ยืนยันการบันทึกข้อมูล",
+    "ต้องการยืนยันการบันทึกข้อมูลนี้หรือไม่ ?"
+  );
+}
+watch(props.data, async () => {
+  formData.complaint = props.data.complaint;
+  formData.complaintdetail = props.data.complaintdetail;
+  formData.detail = props.data.detail;
+  formData.fault = props.data.fault;
+  formData.results = props.data.results;
+  formData.other = props.data.other;
+  formData.evidenceFiles = props.data.evidenceFiles;
+  formData.fileComplaint = props.data.fileComplaint;
+  formData.clickTime = props.data.clickTime;
+  formData.date = props.data.date;
+  formData.dateEnd = props.data.dateEnd;
+  formData.investigation = props.data.investigation;
+  formData.daysExtend = props.data.daysExtend;
+});
+</script>
+<template>
+  <q-card flat bordered class="col-12 q-mt-sm">
+    <div class="q-pa-md">
+      <form @submit.prevent="validateForm">
+        <div class="row col-12">
+          <div class="col-12 row bg-white q-col-gutter-md">
+            <div class="col-xs-12 row items-center">
+              <div class="col-12">
+                <q-input
+                  for="#complaint"
+                  class="full-width inputgreen cursor-pointer"
+                  ref="complaintRef"
+                  outlined
+                  dense
+                  lazy-rules
+                  borderless
+                  v-model="formData.complaint"
+                  :rules="[(val) => !!val || `${'กรุณากรอกเรื่องร้องเรียน'}`]"
+                  hide-bottom-space
+                  :label="`${'เรื่องร้องเรียน'}`"
+                  type="textarea"
+                />
+              </div>
+              <div class="row no-wrap col-12">
+                <div class="col-4 q-my-md q-mr-xs">
+                  <q-select
+                    for="#fault"
+                    outlined
+                    dense
+                    ref="faultRef"
+                    v-model="formData.fault"
+                    :rules="[(val) => !!val || `${'กรุณาเลือกลักษณะความผิด'}`]"
+                    :options="investigateFactStore.faultOp"
+                    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>
+                <div class="col-4 q-my-md q-mr-xs">
+                  <q-select
+                    for="#investigation"
+                    outlined
+                    dense
+                    ref="investigationRef"
+                    :rules="[
+                      (val) => !!val || `${'กรุณาเลือกลักษณะการสืบสวน'}`,
+                    ]"
+                    v-model="formData.investigation"
+                    :options="investigateFactStore.investigationOp"
+                    label="ลักษณะการสืบสวน"
+                    emit-value
+                    map-options
+                    option-label="name"
+                    option-value="id"
+                    use-input
+                    @filter="(inputValue: any,
+            doneFn: Function) => filterFnOptionsType(inputValue, doneFn, 'investigationOp'
+            )"
+                    ><template v-slot:no-option>
+                      <q-item>
+                        <q-item-section class="text-grey">
+                          ไม่มีข้อมูล
+                        </q-item-section>
+                      </q-item>
+                    </template>
+                  </q-select>
+                </div>
+              </div>
+              <div
+                v-if="formData.investigation === '003'"
+                class="col-12 q-mb-md"
+              >
+                <q-input
+                  for="#other"
+                  class="full-width inputgreen cursor-pointer"
+                  outlined
+                  ref="otherRef"
+                  dense
+                  borderless
+                  v-model="formData.other"
+                  hide-bottom-space
+                  :label="`${'รายการอื่นๆ(โปรดระบุ)'}`"
+                  type="textarea"
+                  :rules="[
+                    (val) =>
+                      formData.investigation === '003'
+                        ? !!val || 'กรุณาเลือกจำนวนวันที่ต้องการขยาย'
+                        : true,
+                  ]"
+                />
+              </div>
+
+              <div class="row items-start col-12">
+                <p
+                  class="text-weight-medium q-ma-none text-center align-top q-pt-sm"
+                >
+                  วันที่สืบสวน
+                </p>
+                <q-checkbox
+                  for="#clickTime"
+                  size="md"
+                  v-model="formData.clickTime"
+                  label="ขยายเวลา"
+                  color="primary"
+                  class="text-weight-medium q-ml-sm"
+                  keep-color
+                />
+                <div v-if="formData.clickTime !== true" class="self-start row">
+                  <div class="q-mx-xs">
+                    <datepicker
+                      menu-class-name="modalfix"
+                      v-model="formData.date"
+                      :locale="'th'"
+                      autoApply
+                      :enableTimePicker="false"
+                      week-start="0"
+                    >
+                      <template #year="{ year }">{{ year + 543 }}</template>
+                      <template #year-overlay-value="{ value }">{{
+                        parseInt(value + 543)
+                      }}</template>
+                      <template #trigger>
+                        <q-input
+                          for="#date"
+                          class="full-width inputgreen cursor-pointer"
+                          ref="dateRef"
+                          outlined
+                          dense
+                          lazy-rules
+                          borderless
+                          :model-value="
+                            formData.date ? date2Thai(formData.date) : null
+                          "
+                          :rules="[
+                            (val) =>
+                              !!val || `${'กรุณาเลือกวันที่เริ่มการสอบสวน'}`,
+                          ]"
+                          :label="`${'วันที่เริ่มการสอบสวน'}`"
+                        >
+                          <template v-slot:prepend>
+                            <q-icon
+                              name="event"
+                              class="cursor-pointer"
+                              color="primary"
+                            >
+                            </q-icon>
+                          </template>
+                        </q-input>
+                      </template>
+                    </datepicker>
+                  </div>
+                  <div class="q-mx-xs q-">
+                    <datepicker
+                      menu-class-name="modalfix"
+                      v-model="formData.dateEnd"
+                      :locale="'th'"
+                      autoApply
+                      :enableTimePicker="false"
+                      week-start="0"
+                    >
+                      <template #year="{ year }">{{ year + 543 }}</template>
+                      <template #year-overlay-value="{ value }">{{
+                        parseInt(value + 543)
+                      }}</template>
+                      <template #trigger>
+                        <q-input
+                          for="#dateEnd"
+                          ref="dateEndRef"
+                          class="full-width inputgreen cursor-pointer"
+                          outlined
+                          dense
+                          lazy-rules
+                          borderless
+                          :model-value="
+                            formData.dateEnd
+                              ? date2Thai(formData.dateEnd)
+                              : null
+                          "
+                          :rules="[
+                            (val) =>
+                              !!val || `${'กรุณาเลือกวันที่สิ้นสุดการสอบสวน'}`,
+                          ]"
+                          :label="`${'วันที่สิ้นสุดการสอบสวน'}`"
+                        >
+                          <template v-slot:prepend>
+                            <q-icon
+                              name="event"
+                              class="cursor-pointer"
+                              color="primary"
+                            >
+                            </q-icon>
+                          </template>
+                        </q-input>
+                      </template>
+                    </datepicker>
+                  </div>
+                </div>
+                <div v-else class="q-mx-xs">
+                  <q-select
+                    for="#daysExtend"
+                    outlined
+                    dense
+                    lazy-rules
+                    ref="daysExtendRef"
+                    v-model="formData.daysExtend"
+                    :options="investigateFactStore.daysExtendOp"
+                    label="จำนวนวันที่ต้องการขยาย"
+                    emit-value
+                    map-options
+                    :rules="[
+                      (val) =>
+                        formData.clickTime === true
+                          ? !!val || 'กรุณาเลือกจำนวนวันที่ต้องการขยาย'
+                          : true,
+                    ]"
+                    option-label="name"
+                    option-value="id"
+                    use-input
+                    @filter="(inputValue: any,
+            doneFn: Function) => filterFnOptionsType(inputValue, doneFn, 'daysExtendOp'
+            )"
+                    ><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="col-12 q-my-xs">
+                <q-input
+                  for="#complaintdetail"
+                  class="full-width inputgreen cursor-pointer"
+                  outlined
+                  ref="complaintdetailRef"
+                  dense
+                  lazy-rules
+                  borderless
+                  v-model="formData.complaintdetail"
+                  :rules="[
+                    (val) => !!val || `${'กรุณากรอกรายละเอียดเรื่องร้องเรียน'}`,
+                  ]"
+                  hide-bottom-space
+                  :label="`${'รายละเอียดเรื่องร้องเรียน'}`"
+                  type="textarea"
+                />
+              </div>
+              <div class="col-12 q-my-sm">
+                <q-file
+                  for="#fileComplaint"
+                  outlined
+                  ref="fileComplaintRef"
+                  dense
+                  v-model="formData.fileComplaint"
+                  label="ไฟล์เอกสารหลักฐานเรื่องร้องเรียน"
+                  lazy-rules
+                  :rules="[(val) => !!val || 'กรุณาเลือกไฟล์หลักฐานการรับ']"
+                  hide-bottom-space
+                >
+                  <template v-slot:prepend>
+                    <q-icon name="attach_file" color="primary" />
+                  </template>
+                </q-file>
+              </div>
+              <div class="col-12 q-my-sm">
+                <q-input
+                  for="#detail"
+                  class="full-width inputgreen cursor-pointer"
+                  outlined
+                  ref="detailRef"
+                  dense
+                  lazy-rules
+                  borderless
+                  v-model="formData.detail"
+                  :rules="[(val) => !!val || `${'กรุณากรอกรายละเอียด'}`]"
+                  hide-bottom-space
+                  :label="`${'รายละเอียด'}`"
+                  type="textarea"
+                />
+              </div>
+              <div class="col-12 q-my-xs">
+                <q-file
+                  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>
+              <div class="row col-12 items-start q-mt-sm">
+                <div class="col-4">
+                  <q-input
+                    for="#results"
+                    standout
+                    dense
+                    ref="resultsRef"
+                    :rules="[(val) => !!val || `${'กรุณากรอกผลการสืบสวน'}`]"
+                    v-model="formData.results"
+                    outlined
+                    debounce="300"
+                    placeholder="ผลการสืบสวน"
+                  >
+                  </q-input>
+                </div>
+                <div class="col-4">
+                  <q-btn
+                    id="#confirm"
+                    label="ยืนยันผลการสืบสวน"
+                    color="public"
+                    class="q-py-sm q-ml-sm"
+                  >
+                    <q-tooltip>ยืนยันผลการสืบสวน</q-tooltip>
+                  </q-btn>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+        <q-separator />
+        <div class="row col-12 q-pa-sm">
+          <q-space />
+          <q-btn id="onSubmit" type="submit" label="บันทึก" color="secondary"
+            ><q-tooltip>บับทึกข้อมูล</q-tooltip></q-btn
+          >
+        </div>
+      </form>
+    </div>
+  </q-card>
+</template>
diff --git a/src/modules/11_discipline/components/2_InvestigateFacts/MainPage.vue b/src/modules/11_discipline/components/2_InvestigateFacts/MainPage.vue
index 72eb8c80f..f5cd3ca97 100644
--- a/src/modules/11_discipline/components/2_InvestigateFacts/MainPage.vue
+++ b/src/modules/11_discipline/components/2_InvestigateFacts/MainPage.vue
@@ -41,13 +41,13 @@ const pagination = ref({
   rowsPerPage: 10,
 });
 
-
 const clickAdd = () => {
   router.push(`/discipline/investigatefacts/add`);
 };
-onMounted(async() => {
- await fecthList([
+onMounted(async () => {
+  await fecthList([
     {
+      id: "001",
       subject: "ทุจริตในหน้าที่",
       interrogated: "ศิรินภา คงน้อยี่",
       fault: "1",
@@ -55,6 +55,7 @@ onMounted(async() => {
       active: "1",
     },
     {
+      id: "002",
       subject: "ทุจริตในหน้าที่",
       interrogated: "นายนครชัย วันดี",
       fault: "1",
@@ -62,6 +63,7 @@ onMounted(async() => {
       active: "1",
     },
     {
+      id: "003",
       subject: "กระทำทุจริตเงินกองทุน",
       interrogated: "นายกัณฐิมา  กาฬสินธ์ุ",
       fault: "0",
@@ -69,6 +71,7 @@ onMounted(async() => {
       active: "1",
     },
     {
+      id: "004",
       subject: "พูดจาไม่สุภาพ",
       interrogated: "นายปิยรมย์ ศิริธาราฟ",
       fault: "0",
@@ -77,6 +80,9 @@ onMounted(async() => {
     },
   ]);
 });
+function editPage(id: string) {
+  router.push(`/discipline/investigatefacts/${id}`);
+}
 </script>
 <template>
   <div class="toptitle text-dark col-12 row items-center">
@@ -86,7 +92,7 @@ onMounted(async() => {
     <div class="row col-12 q-col-gutter-sm q-mb-sm">
       <div>
         <q-btn
-        for="#addInvestigatefacts"
+          for="#addInvestigatefacts"
           @click="clickAdd()"
           size="12px"
           flat
@@ -100,7 +106,7 @@ onMounted(async() => {
       <q-space />
 
       <q-input
-      for="#search"
+        for="#search"
         class="col-xs-12 col-sm-3 col-md-2"
         standout
         dense
@@ -122,7 +128,7 @@ onMounted(async() => {
       </q-input>
 
       <q-select
-      for="#select"
+        for="#select"
         v-model="dataInvestigate.visibleColumns"
         multiple
         outlined
@@ -170,7 +176,12 @@ onMounted(async() => {
         </template>
         <template v-slot:body="props">
           <q-tr :props="props" class="cursor-pointer">
-            <q-td v-for="col in props.cols" :key="col.name" :props="props">
+            <q-td
+              v-for="col in props.cols"
+              :key="col.name"
+              :props="props"
+              @click="editPage(props.row.id)"
+            >
               <div v-if="col.name == 'no'">
                 {{ props.rowIndex + 1 }}
               </div>
@@ -178,7 +189,11 @@ onMounted(async() => {
                 {{ col.value }}
               </div>
             </q-td>
-            <q-td auto-width style="font-size: 14px; width: 10%;">
+            <q-td
+              auto-width
+              style="font-size: 14px; width: 10%"
+              @click="editPage(props.row.id)"
+            >
               {{ props.row.active }}
             </q-td>
             <q-td auto-width>
@@ -187,7 +202,7 @@ onMounted(async() => {
                   v-if="props.row.status === 'ยุติเรื่อง'"
                   for="#cancel"
                   dense
-                  unelevated 
+                  unelevated
                   color="primary"
                   class="q-px-sm"
                   >ยกเลิกยุติเรื่อง</q-btn
diff --git a/src/modules/11_discipline/interface/index/Main.ts b/src/modules/11_discipline/interface/index/Main.ts
index a0eb25edb..94f7e1c6c 100644
--- a/src/modules/11_discipline/interface/index/Main.ts
+++ b/src/modules/11_discipline/interface/index/Main.ts
@@ -3,6 +3,7 @@ interface DataOption {
   name: string;
 }
 interface investigatefactsDataRowType {
+  id:string,
   subject: string;
   interrogated: string;
   fault: string | undefined;
diff --git a/src/modules/11_discipline/interface/request/director.ts b/src/modules/11_discipline/interface/request/director.ts
index b5d18ee0e..ef4ffc25f 100644
--- a/src/modules/11_discipline/interface/request/director.ts
+++ b/src/modules/11_discipline/interface/request/director.ts
@@ -5,6 +5,7 @@ interface FormData {
     position: string;
     phone: string;
     email: string;
+    responsibilities:string
 }
 interface FormRef {
     prefix: object | null;
diff --git a/src/modules/11_discipline/router.ts b/src/modules/11_discipline/router.ts
index b6335fe1e..b2d60b26c 100644
--- a/src/modules/11_discipline/router.ts
+++ b/src/modules/11_discipline/router.ts
@@ -4,6 +4,8 @@ const factsMain = () =>
   import("@/modules/11_discipline/components/2_InvestigateFacts/MainPage.vue");
 const investigatefactsAdd = () =>
   import("@/modules/11_discipline/components/2_InvestigateFacts/AddPage.vue");
+const investigatefactsEdit = () =>
+  import("@/modules/11_discipline/components/2_InvestigateFacts/EditPage.vue");
 const disciplinaryMain = () =>
   import(
     "@/modules/11_discipline/components/3_InvestigateDisciplinary/MainPage.vue"
@@ -165,6 +167,16 @@ export default [
       Role: "coin",
     },
   },
+  {
+    path: "/discipline/investigatefacts/:id",
+    name: "/discipline-investigatefactsEdit",
+    component: investigatefactsEdit,
+    meta: {
+      Auth: true,
+      Key: [11.2],
+      Role: "coin",
+    },
+  },
   {
     path: "/discipline/InvestigateDisciplinary/add",
     name: "/discipline-InvestigateDisciplinaryAdd",
diff --git a/src/modules/11_discipline/store/InvestigateFactStore.ts b/src/modules/11_discipline/store/InvestigateFactStore.ts
index 9b645d940..7974497dc 100644
--- a/src/modules/11_discipline/store/InvestigateFactStore.ts
+++ b/src/modules/11_discipline/store/InvestigateFactStore.ts
@@ -108,6 +108,7 @@ export const useInvestigateFactStore = defineStore("DisciplineInvestigateFact",
     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):'-',