From 02c8376b7f48a04ed455702907870ebc96cfac98 Mon Sep 17 00:00:00 2001
From: setthawutttty <stw.ttty@gmail.com>
Date: Tue, 7 Nov 2023 09:52:03 +0700
Subject: [PATCH] =?UTF-8?q?ui=20=E0=B8=A3=E0=B8=B2=E0=B8=A2=E0=B8=81?=
 =?UTF-8?q?=E0=B8=B2=E0=B8=A3=E0=B8=81=E0=B8=B2=E0=B8=A3=E0=B8=AA=E0=B8=AD?=
 =?UTF-8?q?=E0=B8=9A=E0=B8=AA=E0=B8=A7=E0=B8=99=E0=B8=84=E0=B8=A7=E0=B8=B2?=
 =?UTF-8?q?=E0=B8=A1=E0=B8=9C=E0=B8=B4=E0=B8=94=E0=B8=97=E0=B8=B2=E0=B8=87?=
 =?UTF-8?q?=E0=B8=A7=E0=B8=B4=E0=B8=99=E0=B8=B1=E0=B8=A2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../3_InvestigateDisciplinary/AddPage.vue     | 612 +----------------
 .../3_InvestigateDisciplinary/EditPage.vue    |  82 +++
 .../3_InvestigateDisciplinary/Form.vue        | 644 ++++++++++++++++++
 .../3_InvestigateDisciplinary/MainPage.vue    |  10 +-
 .../11_discipline/interface/index/Main.ts     |   1 +
 src/modules/11_discipline/router.ts           |  18 +-
 .../store/InvestigateDisStore.ts              |   1 +
 7 files changed, 764 insertions(+), 604 deletions(-)
 create mode 100644 src/modules/11_discipline/components/3_InvestigateDisciplinary/EditPage.vue
 create mode 100644 src/modules/11_discipline/components/3_InvestigateDisciplinary/Form.vue

diff --git a/src/modules/11_discipline/components/3_InvestigateDisciplinary/AddPage.vue b/src/modules/11_discipline/components/3_InvestigateDisciplinary/AddPage.vue
index cd7bf8b3f..e580bdcc8 100644
--- a/src/modules/11_discipline/components/3_InvestigateDisciplinary/AddPage.vue
+++ b/src/modules/11_discipline/components/3_InvestigateDisciplinary/AddPage.vue
@@ -1,186 +1,20 @@
 <script setup lang="ts">
-import { ref, onMounted, reactive } from "vue";
-import { useQuasar, QForm } from "quasar";
-import { useRouter, useRoute } from "vue-router";
-import { useCounterMixin } from "@/stores/mixin";
-import Dialogbody from "@/modules/11_discipline/components/3_InvestigateDisciplinary/Dialogbody.vue";
-import Table from "@/modules/11_discipline/components/3_InvestigateDisciplinary/DirectorTable.vue";
-import { useInvestigateDisStore } from "@/modules/11_discipline/store/InvestigateDisStore";
-import type {
-  FormData,
-  disciplinaryRef,
-} from "@/modules/11_discipline/interface/request/disciplinary";
-const investigateDis = useInvestigateDisStore();
-const { fecthDirector } = investigateDis;
-
-onMounted(async () => {
-  await fecthDirector([
-    {
-      nameDirector: "นาง เกสินี เจียรสุมัย",
-      position: "ครู",
-      duty: "ประธาน",
-      email: "e@email.com",
-      telephone: "0800808080",
-    },
-    {
-      nameDirector: "นาย สรวิชญ์ พลสิทธิ์",
-      position: "ทดลองงาน",
-      duty: "เลขานุการ",
-      email: "g@gmail.com",
-      telephone: "0614565145",
-    },
-  ]);
-  await hideLoader();
-});
-
-const popup = () => {
-  modal.value = true;
-  filterKeyword2.value = "";
-};
-
-const mixin = useCounterMixin();
-const { date2Thai, hideLoader, dialogConfirm } = mixin;
+import Form from "@/modules/11_discipline/components/3_InvestigateDisciplinary/Form.vue";
+import { useRoute, useRouter } from "vue-router";
 const router = useRouter();
-const route = useRoute();
-const rows = ref([]);
-const modal = ref<boolean>(false);
-const $q = useQuasar();
-const id = ref<string>(route.params.id as string);
-const type = ref<string>("");
-const myForm = ref<QForm | null>(null); //form data input
-const edit = ref<boolean>(false);
-const dateInvestigate = ref<Date>(new Date());
-const dateAllegation = ref<Date>(new Date());
-const dateEvident = ref<Date>(new Date());
-const filterKeyword2 = ref<string>("");
-const complaintRef = ref<Object | null>(null);
-const dateInvestigateRef = ref<Object | null>(null);
-const dateAllegationRef = ref<Object | null>(null);
-const dateEvidentRef = ref<Object | null>(null);
-const casefaultRef = ref<Object | null>(null);
-const refLawRef = ref<Object | null>(null);
-const typefaultRef = ref<Object | null>(null);
-const faultLevelRef = ref<Object | null>(null);
-const detailComplaintRef = ref<Object | null>(null);
-const whereInvestigateRef = ref<Object | null>(null);
-const witnessesRef = ref<Object | null>(null);
-const InvestResultsRef = ref<Object | null>(null);
-const filesEvidenceRef = ref<Object | null>(null);
-const filesRecordAccuserRef = ref<Object | null>(null);
-const filesWitnessesRef = ref<Object | null>(null);
-const filesEtcRef = ref<Object | null>(null);
-const trueDetailRef = ref<Object | null>(null);
-const evidenceRef = ref<Object | null>(null);
-const recordAccuserRef = ref<Object | null>(null);
 
-const fileDocDataUpload = ref<File[]>([]);
-const initialPagination = ref<any>({
-  rowsPerPage: 0,
-});
-
-const formData = reactive<FormData>({
-  Complaint: "",
-  dateInvestigate: null,
-  dateAllegation: null,
-  dateEvident: null,
-  casefault: "",
-  typefault: "",
-  faultLevel: "",
-  refLaw: "",
-  detailComplaint: "",
-  whereInvestigate: "",
-  trueDetail: "",
-  evidence: "",
-  recordAccuser: "",
-  witnesses: "",
-  InvestResults: "",
-  filesEvidence: null,
-  filesRecordAccuser: null,
-  filesWitnesses: null,
-  filesEtc: null,
-});
-
-const objectdisciplinary: disciplinaryRef = {
-  Complaint: complaintRef,
-  dateInvestigate: dateInvestigateRef,
-  dateAllegation: dateAllegationRef,
-  dateEvident: dateEvidentRef,
-  casefault: casefaultRef,
-  typefault: typefaultRef,
-  faultLevel: faultLevelRef,
-  refLaw: refLawRef,
-  detailComplaint: detailComplaintRef,
-  whereInvestigate: whereInvestigateRef,
-  trueDetail: trueDetailRef,
-  evidence: evidenceRef,
-  recordAccuser: recordAccuserRef,
-  witnesses: witnessesRef,
-  InvestResults: InvestResultsRef,
-  filesEvidence: filesEvidenceRef,
-  filesRecordAccuser: filesRecordAccuserRef,
-  filesWitnesses: filesWitnessesRef,
-  filesEtc: filesEtcRef,
-};
-
-function validateForm() {
-  const hasError = [];
-  for (const key in objectdisciplinary) {
-    if (Object.prototype.hasOwnProperty.call(objectdisciplinary, key)) {
-      const property = objectdisciplinary[key];
-      if (property.value && typeof property.value.validate === "function") {
-        const isValid = property.value.validate();
-        hasError.push(isValid);
-      }
-    }
-  }
-  if (hasError.every((result) => result === true)) {
-    onSubmit();
-  } else {
-    console.log("ไม่ผ่าน ");
-    console.log(hasError);
-  }
-}
-
-const routeName = router.currentRoute.value.name;
-
-const clickClose = () => {
-  modal.value = false;
-};
-
-// เรียกข้อมูลของรอบการเสนอขอ
-
-const filter = ref<string>(""); //search data table
-
-const fileUploadDoc = async (files: any) => {
-  files.forEach((file: any) => {
-    fileDocDataUpload.value.push(file);
-  });
-};
-
-// คลิกบันทึก
-function onSubmit() {
-  dialogConfirm(
-    $q,
-    async () => {
-      console.log(formData);
-    },
-    "ยืนยันการบันทึกข้อมูล",
-    "ต้องการยืนยันการบันทึกข้อมูลนี้หรือไม่ ?"
-  );
-}
-
-const deleteData = async (id: string) => {
-  console.log("delete");
-};
-
-const clickBack = () => {
+// บันทึกข้อมูล
+const onSubmit = async () => {
+  // post
+  console.log("add");
   router.push(`/discipline/disciplinary`);
 };
 </script>
 <template>
   <div class="col-xs-12 col-sm-12 col-md-11">
-    <div class="toptitle col-12 row items-center">
+    <div class="toptitle text-dark col-12 row items-center">
       <q-btn
+        for="#backMaininvestigate"
         icon="mdi-arrow-left"
         unelevated
         round
@@ -188,435 +22,11 @@ const clickBack = () => {
         flat
         color="primary"
         class="q-mr-sm"
-        @click="clickBack"
+        @click="router.go(-1)"
       />
-      {{ "เพิ่มการสอบสวนความผิดทางวินัย" }}
+      เพิ่มการสอบสวนความผิดทางวินัย
     </div>
-    <form @submit.prevent="validateForm">
-      <div class="col-12">
-        <q-card bordered>
-          <div class="col-12 row q-col-gutter-md q-pa-md">
-            <div class="col-xs-12 col-sm-12 row">
-              <q-separator />
-              <div class="col-12 row q-pa-sm q-col-gutter-sm">
-                <q-input
-                  class="col-12"
-                  dense
-                  outlined
-                  v-model="formData.Complaint"
-                  for="#Complaint"
-                  ref="complaintRef"
-                  label="เรื่องร้องเรียน"
-                  type="textarea"
-                  :rules="[(val:string) => !!val || `${'กรุณากรอกเรื่องร้องเรียน'}`]"
-                />
-                <datepicker
-                  menu-class-name="modalfix"
-                  v-model="dateInvestigate"
-                  ref="dateInvestigateRef"
-                  for="#dateInvestigate"
-                  :locale="'th'"
-                  autoApply
-                  class="col-xs-12 col-sm-4"
-                  borderless
-                  :enableTimePicker="false"
-                  week-start="0"
-                >
-                  <template #year="{ year }">
-                    {{ year + 543 }}
-                  </template>
-                  <template #year-overlay-value="{ value }">
-                    {{ parseInt(value + 543) }}
-                  </template>
-                  <template #trigger>
-                    <q-input
-                      outlined
-                      dense
-                      class="full-width datepicker"
-                      :model-value="
-                        dateInvestigate != null
-                          ? date2Thai(dateInvestigate)
-                          : null
-                      "
-                      :label="`${'วันที่สอบสวน'}`"
-                      :rules="[(val) => !!val || `${'กรุณาเลือกวันที่สอบสวน'}`]"
-                    >
-                      <template v-slot:prepend>
-                        <q-icon
-                          name="event"
-                          class="cursor-pointer"
-                          style="color: var(--q-primary)"
-                        >
-                        </q-icon>
-                      </template>
-                    </q-input>
-                  </template>
-                </datepicker>
-                <datepicker
-                  menu-class-name="modalfix"
-                  ref="dateAllegationRef"
-                  for="#dateAllegation"
-                  v-model="dateAllegation"
-                  class="col-xs-12 col-sm-4"
-                  :locale="'th'"
-                  autoApply
-                  borderless
-                  :enableTimePicker="false"
-                  week-start="0"
-                >
-                  <template #year="{ year }">
-                    {{ year + 543 }}
-                  </template>
-                  <template #year-overlay-value="{ value }">
-                    {{ parseInt(value + 543) }}
-                  </template>
-                  <template #trigger>
-                    <q-input
-                      outlined
-                      dense
-                      class="col-xs-12 col-sm-4"
-                      :model-value="
-                        dateAllegation != null
-                          ? date2Thai(dateAllegation)
-                          : null
-                      "
-                      :label="`${'วันที่รับทราบข้อกล่าวหา'}`"
-                      :rules="[
-                        (val) =>
-                          !!val || `${'กรุณาเลือกวันที่รับทราบข้อกล่าวหา'}`,
-                      ]"
-                    >
-                      <template v-slot:prepend>
-                        <q-icon
-                          name="event"
-                          class="cursor-pointer"
-                          style="color: var(--q-primary)"
-                        >
-                        </q-icon>
-                      </template>
-                    </q-input>
-                  </template>
-                </datepicker>
-                <datepicker
-                  menu-class-name="modalfix"
-                  ref="dateEvidentRef"
-                  for="#dateEvident"
-                  v-model="dateEvident"
-                  :locale="'th'"
-                  autoApply
-                  class="col-xs-12 col-sm-4"
-                  borderless
-                  :enableTimePicker="false"
-                  week-start="0"
-                >
-                  <template #year="{ year }">
-                    {{ year + 543 }}
-                  </template>
-                  <template #year-overlay-value="{ value }">
-                    {{ parseInt(value + 543) }}
-                  </template>
-                  <template #trigger>
-                    <q-input
-                      outlined
-                      dense
-                      class="full-width datepicker"
-                      :model-value="
-                        dateEvident != null ? date2Thai(dateEvident) : null
-                      "
-                      :label="`${'วันที่สรุปพยานหลักฐาน'}`"
-                      :rules="[
-                        (val) =>
-                          !!val || `${'กรุณาเลือกวันที่สรุปพยานหลักฐาน'}`,
-                      ]"
-                    >
-                      <template v-slot:prepend>
-                        <q-icon
-                          name="event"
-                          class="cursor-pointer"
-                          style="color: var(--q-primary)"
-                        >
-                        </q-icon>
-                      </template>
-                    </q-input>
-                  </template>
-                </datepicker>
-                <div class="col-xs-12 col-sm-12 text-bold">
-                  กรรมการ
-                  <q-btn
-                    size="12px"
-                    flat
-                    round
-                    color="add"
-                    @click="popup()"
-                    icon="mdi-plus"
-                  >
-                    <q-tooltip>เพิ่มกรรมการ</q-tooltip>
-                  </q-btn>
-                </div>
-                <div class="col-xs-12 col-sm-12 q-pb-md">
-                  <Table
-                    style="max-height: 80vh"
-                    :rows="rows"
-                    :columns="investigateDis.columnsDirector"
-                    :filter="filter"
-                    :visible-columns="investigateDis.visibleColumnsDirector"
-                    v-model:inputfilter="filter"
-                    v-model:inputvisible="investigateDis.visibleColumnsDirector"
-                    :pagination="initialPagination"
-                    :nornmalData="true"
-                    :paging="true"
-                    :titleText="''"
-                  >
-                    <template #columns="props">
-                      <q-tr :props="props" class="cursor-pointer">
-                        <q-td
-                          v-for="col in props.cols"
-                          :key="col.name"
-                          :props="props"
-                        >
-                          <div v-if="col.name == 'no'" class="table_ellipsis2">
-                            {{ props.rowIndex + 1 }}
-                          </div>
-                          <div v-else class="table_ellipsis2">
-                            {{ col.value }}
-                          </div>
-                        </q-td>
-                        <q-td>
-                          <q-btn
-                            dense
-                            size="12px"
-                            flat
-                            round
-                            color="red"
-                            @click="deleteData(props.row.id)"
-                            icon="mdi-delete"
-                          >
-                            <q-tooltip>ลบข้อมูล</q-tooltip>
-                          </q-btn>
-                        </q-td>
-                      </q-tr>
-                    </template>
-                  </Table>
-                </div>
 
-                <q-input
-                  class="col-xs-12 col-sm-6"
-                  dense
-                  outlined
-                  ref="casefaultRef"
-                  v-model="formData.casefault"
-                  for="#casefault"
-                  label="กรณีมีความผิด"
-                  :rules="[(val) => !!val || `${'กรุณากรอกกรณีมีความผิด'}`]"
-                  lazy-rules
-                />
-                <q-input
-                  class="col-xs-12 col-sm-6"
-                  dense
-                  outlined
-                  for="#whereInvestigate"
-                  ref="whereInvestigateRef"
-                  v-model="formData.whereInvestigate"
-                  label="สอบสวนที่"
-                  :rules="[(val) => !!val || `${'กรุณากรอกสอบสวนที่'}`]"
-                  lazy-rules
-                />
-                <q-select
-                  dense
-                  class="col-xs-12 col-sm-3"
-                  outlined
-                  for="#typefault"
-                  ref="typefaultRef"
-                  v-model="formData.typefault"
-                  option-label="name"
-                  option-value="id"
-                  :options="investigateDis.optionsTypefault"
-                  label="ลักษณะความผิด"
-                />
-                <q-select
-                  dense
-                  class="col-xs-12 col-sm-3"
-                  outlined
-                  for="#faultLevel"
-                  ref="faultLevelRef"
-                  v-model="formData.faultLevel"
-                  option-label="name"
-                  option-value="id"
-                  :options="investigateDis.optionsfaultLevel"
-                  label="ระดับโทษความผิด"
-                />
-                <q-input
-                  class="col-xs-12 col-sm-6 q-pb-md"
-                  dense
-                  for="#refLaw"
-                  outlined
-                  ref="refLawRef"
-                  v-model="formData.refLaw"
-                  label="อ้างอิงมาตราตามกฎหมาย"
-                  :rules="[
-                    (val) => !!val || `${'กรุณากรอกอ้างอิงมาตราตามกฎหมาย'}`,
-                  ]"
-                  lazy-rules
-                />
-                <q-input
-                  class="col-12"
-                  dense
-                  outlined
-                  for="#detailComplaint"
-                  ref="detailComplaintRef"
-                  v-model="formData.detailComplaint"
-                  label="รายละเอียดเรื่องร้องเรียน"
-                  type="textarea"
-                  :rules="[(val:string) => !!val || `${'กรุณากรอกรายละเอียดเรื่องร้องเรียน'}`]"
-                />
-                <q-input
-                  class="col-12"
-                  dense
-                  outlined
-                  for="#trueDetail"
-                  ref="trueDetailRef"
-                  v-model="formData.trueDetail"
-                  label="รายละเอียดสืบสวนข้อเท็จจริง"
-                  type="textarea"
-                  :rules="[(val:string) => !!val || `${'กรุณากรอกรายละเอียดสืบสวนข้อเท็จจริง'}`]"
-                />
-                <q-input
-                  class="col-12"
-                  dense
-                  outlined
-                  for="#evidence"
-                  ref="evidenceRef"
-                  v-model="formData.evidence"
-                  label="สรุปพยานหลักฐานสนับสนุนข้อกล่าวหา"
-                  type="textarea"
-                  :rules="[(val:string) => !!val || `${'กรุณากรอกสรุปพยานหลักฐานสนับสนุนข้อกล่าวหา'}`]"
-                />
-                <q-file
-                  class="col-12 q-pb-md"
-                  outlined
-                  dense
-                  ref="filesEvidenceRef"
-                  for="#filesEvidence"
-                  v-model="formData.filesEvidence"
-                  @added="fileUploadDoc"
-                  label="ไฟล์เอกสารหลักฐานสรุปพยานหลักฐานสนับสนุนข้อกล่าวหา"
-                  hide-bottom-space
-                  lazy-rules
-                  accept=".pdf,.xlsx,.doc"
-                >
-                  <template v-slot:prepend>
-                    <q-icon name="attach_file" />
-                  </template>
-                </q-file>
-                <q-input
-                  class="col-12"
-                  dense
-                  outlined
-                  ref="recordAccuserRef"
-                  for="#recordAccuser"
-                  v-model="formData.recordAccuser"
-                  label="บันทึกถ้อยคำของผู้กล่าวหา"
-                  type="textarea"
-                  :rules="[(val:string) => !!val || `${'กรุณากรอกบันทึกถ้อยคำของผู้กล่าวหา'}`]"
-                />
-                <q-file
-                  class="col-12 q-pb-md"
-                  outlined
-                  dense
-                  ref="filesRecordAccuserRef"
-                  for="#filesRecordAccuser"
-                  v-model="formData.filesRecordAccuser"
-                  @added="fileUploadDoc"
-                  label="ไฟล์เอกสารบันทึกถ้อยคำของผู้กล่าวหา"
-                  hide-bottom-space
-                  lazy-rules
-                  accept=".pdf,.xlsx,.doc"
-                >
-                  <template v-slot:prepend>
-                    <q-icon name="attach_file" />
-                  </template>
-                </q-file>
-                <q-input
-                  class="col-12"
-                  dense
-                  outlined
-                  for="#witnesses"
-                  ref="witnessesRef"
-                  v-model="formData.witnesses"
-                  label="พยานและการบันทึกถ้อยคำ"
-                  type="textarea"
-                  :rules="[(val:string) => !!val || `${'กรุณากรอกพยานและการบันทึกถ้อยคำ'}`]"
-                />
-                <q-file
-                  class="col-12 q-pb-md"
-                  outlined
-                  dense
-                  ref="filesWitnessesRef"
-                  for="#filesWitnesses"
-                  v-model="formData.filesWitnesses"
-                  @added="fileUploadDoc"
-                  label="ไฟล์เอกสารพยานและการบันทึกถ้อยคำ"
-                  hide-bottom-space
-                  lazy-rules
-                  accept=".pdf,.xlsx,.doc"
-                >
-                  <template v-slot:prepend>
-                    <q-icon name="attach_file" />
-                  </template>
-                </q-file>
-                <q-input
-                  class="col-12"
-                  dense
-                  outlined
-                  for="#InvestResults"
-                  ref="InvestResultsRef"
-                  v-model="formData.InvestResults"
-                  label="ผลการสอบสวน"
-                  type="textarea"
-                  :rules="[(val:string) => !!val || `${'กรุณากรอกผลการสอบสวน'}`]"
-                />
-                <q-file
-                  class="col-12"
-                  outlined
-                  dense
-                  ref="filesEtcRef"
-                  for="#filesEtc"
-                  v-model="formData.filesEtc"
-                  @added="fileUploadDoc"
-                  label="ไฟล์เอกสารหลักฐานอื่น ๆ"
-                  hide-bottom-space
-                  lazy-rules
-                  accept=".pdf,.xlsx,.doc"
-                >
-                  <template v-slot:prepend>
-                    <q-icon name="attach_file" />
-                  </template>
-                </q-file>
-              </div>
-            </div>
-          </div>
-          <q-separator />
-          <div class="row col-12 q-pa-sm">
-            <q-space />
-            <q-btn
-              for="ButtonOnSubmit"
-              id="formSubmit"
-              color="secondary"
-              label="บันทึก"
-              type="submit"
-              ><q-tooltip>บับทึกข้อมูล</q-tooltip></q-btn
-            >
-          </div>
-        </q-card>
-      </div>
-    </form>
+    <Form :on-submit="onSubmit" />
   </div>
-  <Dialogbody
-    v-model:Modal="modal"
-    :clickClose="clickClose"
-    :rows2="investigateDis.rows2"
-    v-model:filterKeyword2="filterKeyword2"
-    v-model:type="type"
-  />
-  <!-- :fecthlistappointment="fecthlistappointment" -->
 </template>
diff --git a/src/modules/11_discipline/components/3_InvestigateDisciplinary/EditPage.vue b/src/modules/11_discipline/components/3_InvestigateDisciplinary/EditPage.vue
new file mode 100644
index 000000000..2ac857a68
--- /dev/null
+++ b/src/modules/11_discipline/components/3_InvestigateDisciplinary/EditPage.vue
@@ -0,0 +1,82 @@
+<script setup lang="ts">
+import { onMounted, reactive, ref } from "vue";
+import Form from "@/modules/11_discipline/components/3_InvestigateDisciplinary/Form.vue";
+import type { FormData } from "@/modules/11_discipline/interface/request/disciplinary";
+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: "",
+  dateInvestigate: null,
+  dateAllegation: null,
+  dateEvident: null,
+  casefault: "",
+  typefault: "",
+  faultLevel: "",
+  refLaw: "",
+  detailComplaint: "",
+  whereInvestigate: "",
+  trueDetail: "",
+  evidence: "",
+  recordAccuser: "",
+  witnesses: "",
+  InvestResults: "",
+  filesEvidence: null,
+  filesRecordAccuser: null,
+  filesWitnesses: null,
+  filesEtc: null,
+});
+const fetchData = async () => {
+  data.Complaint = "test1"
+  data.dateInvestigate = new Date("2023-11-08T14:58:00")
+  data.dateAllegation = new Date("2023-11-08T14:58:00")
+  data.dateEvident = new Date("2023-11-08T14:58:00")
+  data.casefault = "test1"
+  data.typefault = "2"
+  data.faultLevel = "2"
+  data.refLaw = "test"
+  data.detailComplaint = "รายละเอียด"
+  data.whereInvestigate = "ที่ไหน"
+  data.trueDetail = "รายละเอียด"
+  data.evidence = "รายละเอียด"
+  data.recordAccuser = "รายละเอียด"
+  data.witnesses = "รายละเอียด"
+  data.InvestResults = "รายละเอียด"
+  data.filesEvidence = null
+  data.filesRecordAccuser = null
+  data.filesWitnesses = null
+  data.filesEtc = null
+};
+
+// แก้ไขข้อมูล
+const onSubmit = async (id: string) => {
+  // put
+  console.log("edit");
+  router.push(`/discipline/disciplinary`);
+};
+</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/disciplinary`)"
+      />
+      แก้ไขการสอบสวนความผิดทางวินัย {{ id }}#id
+    </div>
+    <Form :on-submit="onSubmit" :data="data" />
+  </div>
+</template>
diff --git a/src/modules/11_discipline/components/3_InvestigateDisciplinary/Form.vue b/src/modules/11_discipline/components/3_InvestigateDisciplinary/Form.vue
new file mode 100644
index 000000000..4695b18d6
--- /dev/null
+++ b/src/modules/11_discipline/components/3_InvestigateDisciplinary/Form.vue
@@ -0,0 +1,644 @@
+<script setup lang="ts">
+import { ref, onMounted, reactive, watch } from "vue";
+import { useQuasar, QForm } from "quasar";
+import { useRouter, useRoute } from "vue-router";
+import { useCounterMixin } from "@/stores/mixin";
+import Dialogbody from "@/modules/11_discipline/components/3_InvestigateDisciplinary/Dialogbody.vue";
+import Table from "@/modules/11_discipline/components/3_InvestigateDisciplinary/DirectorTable.vue";
+import { useInvestigateDisStore } from "@/modules/11_discipline/store/InvestigateDisStore";
+import type {
+  FormData,
+  disciplinaryRef,
+} from "@/modules/11_discipline/interface/request/disciplinary";
+const investigateDis = useInvestigateDisStore();
+const { fecthDirector } = investigateDis;
+const props = defineProps({
+  data: {
+    type: Object,
+    default: null,
+  },
+  onSubmit: {
+    type: Function,
+    default: () => "",
+  },
+});
+onMounted(async () => {
+  await fecthDirector([
+    {
+      nameDirector: "นาง เกสินี เจียรสุมัย",
+      position: "ครู",
+      duty: "ประธาน",
+      email: "e@email.com",
+      telephone: "0800808080",
+    },
+    {
+      nameDirector: "นาย สรวิชญ์ พลสิทธิ์",
+      position: "ทดลองงาน",
+      duty: "เลขานุการ",
+      email: "g@gmail.com",
+      telephone: "0614565145",
+    },
+  ]);
+  await hideLoader();
+});
+
+const popup = () => {
+  modal.value = true;
+  filterKeyword2.value = "";
+};
+
+const mixin = useCounterMixin();
+const { date2Thai, hideLoader, dialogConfirm } = mixin;
+const router = useRouter();
+const route = useRoute();
+const rows = ref([]);
+const modal = ref<boolean>(false);
+const $q = useQuasar();
+const id = ref<string>(route.params.id as string);
+const type = ref<string>("");
+const myForm = ref<QForm | null>(null); //form data input
+const edit = ref<boolean>(false);
+const dateInvestigate = ref<Date>(new Date());
+const dateAllegation = ref<Date>(new Date());
+const dateEvident = ref<Date>(new Date());
+const filterKeyword2 = ref<string>("");
+const complaintRef = ref<Object | null>(null);
+const dateInvestigateRef = ref<Object | null>(null);
+const dateAllegationRef = ref<Object | null>(null);
+const dateEvidentRef = ref<Object | null>(null);
+const casefaultRef = ref<Object | null>(null);
+const refLawRef = ref<Object | null>(null);
+const typefaultRef = ref<Object | null>(null);
+const faultLevelRef = ref<Object | null>(null);
+const detailComplaintRef = ref<Object | null>(null);
+const whereInvestigateRef = ref<Object | null>(null);
+const witnessesRef = ref<Object | null>(null);
+const InvestResultsRef = ref<Object | null>(null);
+const filesEvidenceRef = ref<Object | null>(null);
+const filesRecordAccuserRef = ref<Object | null>(null);
+const filesWitnessesRef = ref<Object | null>(null);
+const filesEtcRef = ref<Object | null>(null);
+const trueDetailRef = ref<Object | null>(null);
+const evidenceRef = ref<Object | null>(null);
+const recordAccuserRef = ref<Object | null>(null);
+
+const fileDocDataUpload = ref<File[]>([]);
+const initialPagination = ref<any>({
+  rowsPerPage: 0,
+});
+
+const formData = reactive<FormData>({
+  Complaint: "",
+  dateInvestigate: null,
+  dateAllegation: null,
+  dateEvident: null,
+  casefault: "",
+  typefault: "",
+  faultLevel: "",
+  refLaw: "",
+  detailComplaint: "",
+  whereInvestigate: "",
+  trueDetail: "",
+  evidence: "",
+  recordAccuser: "",
+  witnesses: "",
+  InvestResults: "",
+  filesEvidence: null,
+  filesRecordAccuser: null,
+  filesWitnesses: null,
+  filesEtc: null,
+});
+
+const objectdisciplinary: disciplinaryRef = {
+  Complaint: complaintRef,
+  dateInvestigate: dateInvestigateRef,
+  dateAllegation: dateAllegationRef,
+  dateEvident: dateEvidentRef,
+  casefault: casefaultRef,
+  typefault: typefaultRef,
+  faultLevel: faultLevelRef,
+  refLaw: refLawRef,
+  detailComplaint: detailComplaintRef,
+  whereInvestigate: whereInvestigateRef,
+  trueDetail: trueDetailRef,
+  evidence: evidenceRef,
+  recordAccuser: recordAccuserRef,
+  witnesses: witnessesRef,
+  InvestResults: InvestResultsRef,
+  filesEvidence: filesEvidenceRef,
+  filesRecordAccuser: filesRecordAccuserRef,
+  filesWitnesses: filesWitnessesRef,
+  filesEtc: filesEtcRef,
+};
+
+function validateForm() {
+  const hasError = [];
+  for (const key in objectdisciplinary) {
+    if (Object.prototype.hasOwnProperty.call(objectdisciplinary, key)) {
+      const property = objectdisciplinary[key];
+      if (property.value && typeof property.value.validate === "function") {
+        const isValid = property.value.validate();
+        hasError.push(isValid);
+      }
+    }
+  }
+  if (hasError.every((result) => result === true)) {
+    onSubmit();
+  } else {
+    console.log("ไม่ผ่าน ");
+    console.log(hasError);
+  }
+}
+
+const routeName = router.currentRoute.value.name;
+
+const clickClose = () => {
+  modal.value = false;
+};
+
+// เรียกข้อมูลของรอบการเสนอขอ
+
+const filter = ref<string>(""); //search data table
+
+const fileUploadDoc = async (files: any) => {
+  files.forEach((file: any) => {
+    fileDocDataUpload.value.push(file);
+  });
+};
+
+// คลิกบันทึก
+function onSubmit() {
+  dialogConfirm(
+    $q,
+    async () => {
+      console.log(formData);
+      props.onSubmit();
+    },
+    "ยืนยันการบันทึกข้อมูล",
+    "ต้องการยืนยันการบันทึกข้อมูลนี้หรือไม่ ?"
+  );
+}
+
+const deleteData = async (id: string) => {
+  console.log("delete");
+};
+
+const clickBack = () => {
+  router.push(`/discipline/disciplinary`);
+};
+watch(props.data, async () => {
+  formData.Complaint = props.data.Complaint;
+  formData.dateInvestigate = props.data.dateInvestigate;
+  formData.dateAllegation = props.data.dateAllegation;
+  formData.dateEvident = props.data.dateEvident;
+  formData.casefault = props.data.casefault;
+  formData.typefault = props.data.typefault;
+  formData.faultLevel = props.data.faultLevel;
+  formData.refLaw = props.data.refLaw;
+  formData.detailComplaint = props.data.detailComplaint;
+  formData.whereInvestigate = props.data.whereInvestigate;
+  formData.trueDetail = props.data.trueDetail;
+  formData.evidence = props.data.evidence;
+  formData.recordAccuser = props.data.recordAccuser;
+  formData.witnesses = props.data.witnesses;
+  formData.InvestResults = props.data.InvestResults;
+  formData.filesEvidence = props.data.filesEvidence;
+  formData.filesRecordAccuser = props.data.filesRecordAccuser;
+  formData.filesWitnesses = props.data.filesWitnesses;
+  formData.filesEtc = props.data.filesEtc;
+});
+</script>
+<template>
+  <div class="col-xs-12 col-sm-12 col-md-11">
+    <form @submit.prevent="validateForm">
+      <div class="col-12">
+        <q-card bordered>
+          <div class="col-12 row q-col-gutter-md q-pa-md">
+            <div class="col-xs-12 col-sm-12 row">
+              <q-separator />
+              <div class="col-12 row q-pa-sm q-col-gutter-sm">
+                <q-input
+                  class="col-12"
+                  dense
+                  outlined
+                  v-model="formData.Complaint"
+                  for="#Complaint"
+                  ref="complaintRef"
+                  label="เรื่องร้องเรียน"
+                  type="textarea"
+                  :rules="[(val:string) => !!val || `${'กรุณากรอกเรื่องร้องเรียน'}`]"
+                />
+                <datepicker
+                  menu-class-name="modalfix"
+                  v-model="dateInvestigate"
+                  ref="dateInvestigateRef"
+                  for="#dateInvestigate"
+                  :locale="'th'"
+                  autoApply
+                  class="col-xs-12 col-sm-4"
+                  borderless
+                  :enableTimePicker="false"
+                  week-start="0"
+                >
+                  <template #year="{ year }">
+                    {{ year + 543 }}
+                  </template>
+                  <template #year-overlay-value="{ value }">
+                    {{ parseInt(value + 543) }}
+                  </template>
+                  <template #trigger>
+                    <q-input
+                      outlined
+                      dense
+                      class="full-width datepicker"
+                      :model-value="
+                        dateInvestigate != null
+                          ? date2Thai(dateInvestigate)
+                          : null
+                      "
+                      :label="`${'วันที่สอบสวน'}`"
+                      :rules="[(val) => !!val || `${'กรุณาเลือกวันที่สอบสวน'}`]"
+                    >
+                      <template v-slot:prepend>
+                        <q-icon
+                          name="event"
+                          class="cursor-pointer"
+                          style="color: var(--q-primary)"
+                        >
+                        </q-icon>
+                      </template>
+                    </q-input>
+                  </template>
+                </datepicker>
+                <datepicker
+                  menu-class-name="modalfix"
+                  ref="dateAllegationRef"
+                  for="#dateAllegation"
+                  v-model="dateAllegation"
+                  class="col-xs-12 col-sm-4"
+                  :locale="'th'"
+                  autoApply
+                  borderless
+                  :enableTimePicker="false"
+                  week-start="0"
+                >
+                  <template #year="{ year }">
+                    {{ year + 543 }}
+                  </template>
+                  <template #year-overlay-value="{ value }">
+                    {{ parseInt(value + 543) }}
+                  </template>
+                  <template #trigger>
+                    <q-input
+                      outlined
+                      dense
+                      class="col-xs-12 col-sm-4"
+                      :model-value="
+                        dateAllegation != null
+                          ? date2Thai(dateAllegation)
+                          : null
+                      "
+                      :label="`${'วันที่รับทราบข้อกล่าวหา'}`"
+                      :rules="[
+                        (val) =>
+                          !!val || `${'กรุณาเลือกวันที่รับทราบข้อกล่าวหา'}`,
+                      ]"
+                    >
+                      <template v-slot:prepend>
+                        <q-icon
+                          name="event"
+                          class="cursor-pointer"
+                          style="color: var(--q-primary)"
+                        >
+                        </q-icon>
+                      </template>
+                    </q-input>
+                  </template>
+                </datepicker>
+                <datepicker
+                  menu-class-name="modalfix"
+                  ref="dateEvidentRef"
+                  for="#dateEvident"
+                  v-model="dateEvident"
+                  :locale="'th'"
+                  autoApply
+                  class="col-xs-12 col-sm-4"
+                  borderless
+                  :enableTimePicker="false"
+                  week-start="0"
+                >
+                  <template #year="{ year }">
+                    {{ year + 543 }}
+                  </template>
+                  <template #year-overlay-value="{ value }">
+                    {{ parseInt(value + 543) }}
+                  </template>
+                  <template #trigger>
+                    <q-input
+                      outlined
+                      dense
+                      class="full-width datepicker"
+                      :model-value="
+                        dateEvident != null ? date2Thai(dateEvident) : null
+                      "
+                      :label="`${'วันที่สรุปพยานหลักฐาน'}`"
+                      :rules="[
+                        (val) =>
+                          !!val || `${'กรุณาเลือกวันที่สรุปพยานหลักฐาน'}`,
+                      ]"
+                    >
+                      <template v-slot:prepend>
+                        <q-icon
+                          name="event"
+                          class="cursor-pointer"
+                          style="color: var(--q-primary)"
+                        >
+                        </q-icon>
+                      </template>
+                    </q-input>
+                  </template>
+                </datepicker>
+                <div class="col-xs-12 col-sm-12 text-bold">
+                  กรรมการ
+                  <q-btn
+                    size="12px"
+                    flat
+                    round
+                    color="add"
+                    @click="popup()"
+                    icon="mdi-plus"
+                  >
+                    <q-tooltip>เพิ่มกรรมการ</q-tooltip>
+                  </q-btn>
+                </div>
+                <div class="col-xs-12 col-sm-12 q-pb-md">
+                  <Table
+                    style="max-height: 80vh"
+                    :rows="rows"
+                    :columns="investigateDis.columnsDirector"
+                    :filter="filter"
+                    :visible-columns="investigateDis.visibleColumnsDirector"
+                    v-model:inputfilter="filter"
+                    v-model:inputvisible="investigateDis.visibleColumnsDirector"
+                    :pagination="initialPagination"
+                    :nornmalData="true"
+                    :paging="true"
+                    :titleText="''"
+                  >
+                    <template #columns="props">
+                      <q-tr :props="props" class="cursor-pointer">
+                        <q-td
+                          v-for="col in props.cols"
+                          :key="col.name"
+                          :props="props"
+                        >
+                          <div v-if="col.name == 'no'" class="table_ellipsis2">
+                            {{ props.rowIndex + 1 }}
+                          </div>
+                          <div v-else class="table_ellipsis2">
+                            {{ col.value }}
+                          </div>
+                        </q-td>
+                        <q-td>
+                          <q-btn
+                            dense
+                            size="12px"
+                            flat
+                            round
+                            color="red"
+                            @click="deleteData(props.row.id)"
+                            icon="mdi-delete"
+                          >
+                            <q-tooltip>ลบข้อมูล</q-tooltip>
+                          </q-btn>
+                        </q-td>
+                      </q-tr>
+                    </template>
+                  </Table>
+                </div>
+
+                <q-input
+                  class="col-xs-12 col-sm-6"
+                  dense
+                  outlined
+                  ref="casefaultRef"
+                  v-model="formData.casefault"
+                  for="#casefault"
+                  label="กรณีมีความผิด"
+                  :rules="[(val) => !!val || `${'กรุณากรอกกรณีมีความผิด'}`]"
+                  lazy-rules
+                />
+                <q-input
+                  class="col-xs-12 col-sm-6"
+                  dense
+                  outlined
+                  for="#whereInvestigate"
+                  ref="whereInvestigateRef"
+                  v-model="formData.whereInvestigate"
+                  label="สอบสวนที่"
+                  :rules="[(val) => !!val || `${'กรุณากรอกสอบสวนที่'}`]"
+                  lazy-rules
+                />
+                <q-select
+                  dense
+                  class="col-xs-12 col-sm-3"
+                  outlined
+                  for="#typefault"
+                  ref="typefaultRef"
+                  v-model="formData.typefault"
+                  option-label="name"
+                  option-value="id"
+                  emit-value
+                  map-options
+                  :options="investigateDis.optionsTypefault"
+                  label="ลักษณะความผิด"
+                />
+                <q-select
+                  dense
+                  class="col-xs-12 col-sm-3"
+                  outlined
+                  for="#faultLevel"
+                  ref="faultLevelRef"
+                  v-model="formData.faultLevel"
+                  option-label="name"
+                  option-value="id"
+                  emit-value
+                  map-options
+                  :options="investigateDis.optionsfaultLevel"
+                  label="ระดับโทษความผิด"
+                />
+                <q-input
+                  class="col-xs-12 col-sm-6 q-pb-md"
+                  dense
+                  for="#refLaw"
+                  outlined
+                  ref="refLawRef"
+                  v-model="formData.refLaw"
+                  label="อ้างอิงมาตราตามกฎหมาย"
+                  :rules="[
+                    (val) => !!val || `${'กรุณากรอกอ้างอิงมาตราตามกฎหมาย'}`,
+                  ]"
+                  lazy-rules
+                />
+                <q-input
+                  class="col-12"
+                  dense
+                  outlined
+                  for="#detailComplaint"
+                  ref="detailComplaintRef"
+                  v-model="formData.detailComplaint"
+                  label="รายละเอียดเรื่องร้องเรียน"
+                  type="textarea"
+                  :rules="[(val:string) => !!val || `${'กรุณากรอกรายละเอียดเรื่องร้องเรียน'}`]"
+                />
+                <q-input
+                  class="col-12"
+                  dense
+                  outlined
+                  for="#trueDetail"
+                  ref="trueDetailRef"
+                  v-model="formData.trueDetail"
+                  label="รายละเอียดสืบสวนข้อเท็จจริง"
+                  type="textarea"
+                  :rules="[(val:string) => !!val || `${'กรุณากรอกรายละเอียดสืบสวนข้อเท็จจริง'}`]"
+                />
+                <q-input
+                  class="col-12"
+                  dense
+                  outlined
+                  for="#evidence"
+                  ref="evidenceRef"
+                  v-model="formData.evidence"
+                  label="สรุปพยานหลักฐานสนับสนุนข้อกล่าวหา"
+                  type="textarea"
+                  :rules="[(val:string) => !!val || `${'กรุณากรอกสรุปพยานหลักฐานสนับสนุนข้อกล่าวหา'}`]"
+                />
+                <q-file
+                  class="col-12 q-pb-md"
+                  outlined
+                  dense
+                  ref="filesEvidenceRef"
+                  for="#filesEvidence"
+                  v-model="formData.filesEvidence"
+                  @added="fileUploadDoc"
+                  label="ไฟล์เอกสารหลักฐานสรุปพยานหลักฐานสนับสนุนข้อกล่าวหา"
+                  hide-bottom-space
+                  lazy-rules
+                  accept=".pdf,.xlsx,.doc"
+                >
+                  <template v-slot:prepend>
+                    <q-icon name="attach_file" />
+                  </template>
+                </q-file>
+                <q-input
+                  class="col-12"
+                  dense
+                  outlined
+                  ref="recordAccuserRef"
+                  for="#recordAccuser"
+                  v-model="formData.recordAccuser"
+                  label="บันทึกถ้อยคำของผู้กล่าวหา"
+                  type="textarea"
+                  :rules="[(val:string) => !!val || `${'กรุณากรอกบันทึกถ้อยคำของผู้กล่าวหา'}`]"
+                />
+                <q-file
+                  class="col-12 q-pb-md"
+                  outlined
+                  dense
+                  ref="filesRecordAccuserRef"
+                  for="#filesRecordAccuser"
+                  v-model="formData.filesRecordAccuser"
+                  @added="fileUploadDoc"
+                  label="ไฟล์เอกสารบันทึกถ้อยคำของผู้กล่าวหา"
+                  hide-bottom-space
+                  lazy-rules
+                  accept=".pdf,.xlsx,.doc"
+                >
+                  <template v-slot:prepend>
+                    <q-icon name="attach_file" />
+                  </template>
+                </q-file>
+                <q-input
+                  class="col-12"
+                  dense
+                  outlined
+                  for="#witnesses"
+                  ref="witnessesRef"
+                  v-model="formData.witnesses"
+                  label="พยานและการบันทึกถ้อยคำ"
+                  type="textarea"
+                  :rules="[(val:string) => !!val || `${'กรุณากรอกพยานและการบันทึกถ้อยคำ'}`]"
+                />
+                <q-file
+                  class="col-12 q-pb-md"
+                  outlined
+                  dense
+                  ref="filesWitnessesRef"
+                  for="#filesWitnesses"
+                  v-model="formData.filesWitnesses"
+                  @added="fileUploadDoc"
+                  label="ไฟล์เอกสารพยานและการบันทึกถ้อยคำ"
+                  hide-bottom-space
+                  lazy-rules
+                  accept=".pdf,.xlsx,.doc"
+                >
+                  <template v-slot:prepend>
+                    <q-icon name="attach_file" />
+                  </template>
+                </q-file>
+                <q-input
+                  class="col-12"
+                  dense
+                  outlined
+                  for="#InvestResults"
+                  ref="InvestResultsRef"
+                  v-model="formData.InvestResults"
+                  label="ผลการสอบสวน"
+                  type="textarea"
+                  :rules="[(val:string) => !!val || `${'กรุณากรอกผลการสอบสวน'}`]"
+                />
+                <q-file
+                  class="col-12"
+                  outlined
+                  dense
+                  ref="filesEtcRef"
+                  for="#filesEtc"
+                  v-model="formData.filesEtc"
+                  @added="fileUploadDoc"
+                  label="ไฟล์เอกสารหลักฐานอื่น ๆ"
+                  hide-bottom-space
+                  lazy-rules
+                  accept=".pdf,.xlsx,.doc"
+                >
+                  <template v-slot:prepend>
+                    <q-icon name="attach_file" />
+                  </template>
+                </q-file>
+              </div>
+            </div>
+          </div>
+          <q-separator />
+          <div class="row col-12 q-pa-sm">
+            <q-space />
+            <q-btn
+              for="ButtonOnSubmit"
+              id="formSubmit"
+              color="secondary"
+              label="บันทึก"
+              type="submit"
+              ><q-tooltip>บับทึกข้อมูล</q-tooltip></q-btn
+            >
+          </div>
+        </q-card>
+      </div>
+    </form>
+  </div>
+  <Dialogbody
+    v-model:Modal="modal"
+    :clickClose="clickClose"
+    :rows2="investigateDis.rows2"
+    v-model:filterKeyword2="filterKeyword2"
+    v-model:type="type"
+  />
+  <!-- :fecthlistappointment="fecthlistappointment" -->
+</template>
diff --git a/src/modules/11_discipline/components/3_InvestigateDisciplinary/MainPage.vue b/src/modules/11_discipline/components/3_InvestigateDisciplinary/MainPage.vue
index 9c37939f6..2a63f431b 100644
--- a/src/modules/11_discipline/components/3_InvestigateDisciplinary/MainPage.vue
+++ b/src/modules/11_discipline/components/3_InvestigateDisciplinary/MainPage.vue
@@ -21,6 +21,7 @@ const initialPagination = ref<Pagination>({
 onMounted(async () => {
   fecthList([
     {
+      id:'001',
       subject: "ทุจริตในหน้าที่",
       interrogated: "ศิรินภา คงน้อยี่",
       fault: "1",
@@ -31,6 +32,7 @@ onMounted(async () => {
       active: "2",
     },
     {
+      id:'002',
       subject: "ทุจริตในหน้าที่",
       interrogated: "ภัทรานุช คงน้อย",
       fault: "1",
@@ -41,6 +43,7 @@ onMounted(async () => {
       active: "0",
     },
     {
+      id:'003',
       subject: "กระทำทุจริตเงินกองทุน",
       interrogated: "ปรมาพร ศรีมี",
       fault: "2",
@@ -51,6 +54,7 @@ onMounted(async () => {
       active: "1",
     },
     {
+      id:'004',
       subject: "พูดจาไม่สุภาพ",
       interrogated: "สมรัก ใจอารีย์",
       fault: "2",
@@ -67,6 +71,10 @@ onMounted(async () => {
 const clickAdd = () => {
   router.push(`/discipline/InvestigateDisciplinary/add`);
 };
+function openEdit(id:string) {
+  console.log(id)
+  router.push(`/discipline/disciplinary/${id}`)
+}
 </script>
 
 <template>
@@ -91,7 +99,7 @@ const clickAdd = () => {
       >
         <template #columns="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="openEdit(props.row.id)">
               <div v-if="col.name == 'no'">
                 {{ props.rowIndex + 1 }}
               </div>
diff --git a/src/modules/11_discipline/interface/index/Main.ts b/src/modules/11_discipline/interface/index/Main.ts
index 94f7e1c6c..7ea6a448f 100644
--- a/src/modules/11_discipline/interface/index/Main.ts
+++ b/src/modules/11_discipline/interface/index/Main.ts
@@ -12,6 +12,7 @@ interface investigatefactsDataRowType {
 }
 
 interface investigateDisDataRowType {
+  id:string
   subject: string;
   interrogated: string;
   fault: string | undefined;
diff --git a/src/modules/11_discipline/router.ts b/src/modules/11_discipline/router.ts
index 895d1354d..b6e8c7804 100644
--- a/src/modules/11_discipline/router.ts
+++ b/src/modules/11_discipline/router.ts
@@ -10,6 +10,10 @@ const disciplinaryMain = () =>
   import(
     "@/modules/11_discipline/components/3_InvestigateDisciplinary/MainPage.vue"
   );
+const disciplinaryEdit = () =>
+  import(
+    "@/modules/11_discipline/components/3_InvestigateDisciplinary/EditPage.vue"
+  );
 const oredrMain = () =>
   import("@/modules/11_discipline/components/4_Order/MainPage.vue");
 const report = () =>
@@ -18,11 +22,11 @@ const directorMain = () =>
   import(
     "@/modules/11_discipline/components/6_BasicInformation/Director/MainPage.vue"
   );
-  const directorAdd = () =>
+const directorAdd = () =>
   import(
     "@/modules/11_discipline/components/6_BasicInformation/Director/AddPage.vue"
   );
-  const directorEdit = () =>
+const directorEdit = () =>
   import(
     "@/modules/11_discipline/components/6_BasicInformation/Director/EditPage.vue"
   );
@@ -98,6 +102,16 @@ export default [
       Role: "coin",
     },
   },
+  {
+    path: "/discipline/disciplinary/:id",
+    name: "/discipline-disciplinaryEdit",
+    component: disciplinaryEdit,
+    meta: {
+      Auth: true,
+      Key: [11.3],
+      Role: "coin",
+    },
+  },
   {
     path: "/discipline-order",
     name: "/disciplineorder",
diff --git a/src/modules/11_discipline/store/InvestigateDisStore.ts b/src/modules/11_discipline/store/InvestigateDisStore.ts
index 4df44ef0d..7fa168358 100644
--- a/src/modules/11_discipline/store/InvestigateDisStore.ts
+++ b/src/modules/11_discipline/store/InvestigateDisStore.ts
@@ -32,6 +32,7 @@ export const useInvestigateDisStore = defineStore(
     ]);
     async function fecthList(data: investigateDisDataRowType[]) {
       let datalist: investigateDisDataRowType[] = data.map((e: any) => ({
+        id:e.id,
         subject: e.subject,
         interrogated: e.interrogated,
         fault: convertFault(e.fault),