From 32a3ae54673e6ce143ab9534f2383e57865f3012 Mon Sep 17 00:00:00 2001
From: waruneeta <warunee.auy@gmail.com>
Date: Tue, 28 Nov 2023 15:44:25 +0700
Subject: [PATCH] =?UTF-8?q?=E0=B8=9B=E0=B8=A3=E0=B8=B1=E0=B8=9A=E0=B8=A7?=
 =?UTF-8?q?=E0=B8=B4=E0=B8=99=E0=B8=B1=E0=B8=A2=E0=B9=83=E0=B8=99=E0=B8=AA?=
 =?UTF-8?q?=E0=B9=88=E0=B8=A7=E0=B8=99=E0=B8=82=E0=B8=AD=E0=B8=87=E0=B8=AA?=
 =?UTF-8?q?=E0=B8=AD=E0=B8=9A=E0=B8=AA=E0=B8=A7=E0=B8=99=20=E0=B9=81?=
 =?UTF-8?q?=E0=B8=A5=E0=B8=B0=E0=B9=80=E0=B8=9E=E0=B8=B4=E0=B9=88=E0=B8=A1?=
 =?UTF-8?q?=E0=B9=80=E0=B8=A1=E0=B8=99=E0=B8=B9=E0=B8=A3=E0=B8=B2=E0=B8=A2?=
 =?UTF-8?q?=E0=B8=8A=E0=B8=B7=E0=B9=88=E0=B8=AD=E0=B8=9C=E0=B8=B9=E0=B9=89?=
 =?UTF-8?q?=E0=B8=96=E0=B8=B9=E0=B8=81=E0=B8=9E=E0=B8=B1=E0=B8=81=E0=B8=A3?=
 =?UTF-8?q?=E0=B8=B2=E0=B8=8A=E0=B8=81=E0=B8=B2=E0=B8=A3?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/interface/request/main/main.ts            |    6 +
 .../components/2_InvestigateFacts/Form.vue    |    2 +-
 .../3_InvestigateDisciplinary/EditPage.vue    |   24 +-
 .../3_InvestigateDisciplinary/Form.vue        | 1373 +++++++++++------
 .../components/4_Result/EditPage.vue          |    6 +-
 .../components/7_ListSuspend/DialogHeader.vue |   39 +
 .../7_ListSuspend/DialogSendToCommand.vue     |  267 ++++
 .../components/7_ListSuspend/DismissOrder.vue |  382 +++++
 .../components/7_ListSuspend/OutRegistry.vue  |  474 ++++++
 .../11_discipline/components/UploadFile.vue   |   11 +-
 .../interface/request/disciplinary.ts         |   38 +-
 src/modules/11_discipline/router.ts           |   29 +-
 .../store/InvestigateDisStore.ts              |   75 +-
 13 files changed, 2207 insertions(+), 519 deletions(-)
 create mode 100644 src/modules/11_discipline/components/7_ListSuspend/DialogHeader.vue
 create mode 100644 src/modules/11_discipline/components/7_ListSuspend/DialogSendToCommand.vue
 create mode 100644 src/modules/11_discipline/components/7_ListSuspend/DismissOrder.vue
 create mode 100644 src/modules/11_discipline/components/7_ListSuspend/OutRegistry.vue

diff --git a/src/interface/request/main/main.ts b/src/interface/request/main/main.ts
index efb3da8ad..3006d32d1 100644
--- a/src/interface/request/main/main.ts
+++ b/src/interface/request/main/main.ts
@@ -447,6 +447,12 @@ const menuList = readonly<any[]>([
       },
       {
         key: 11.5,
+        label: "รายชื่อผู้ถูกพักราชการ",
+        path: "disciplineListSuspend",
+        role: "discipline",
+      },
+      {
+        key: 11.6,
         label: "รายงาน",
         path: "disciplineReport",
         role: "discipline",
diff --git a/src/modules/11_discipline/components/2_InvestigateFacts/Form.vue b/src/modules/11_discipline/components/2_InvestigateFacts/Form.vue
index f766947cf..c66256872 100644
--- a/src/modules/11_discipline/components/2_InvestigateFacts/Form.vue
+++ b/src/modules/11_discipline/components/2_InvestigateFacts/Form.vue
@@ -1189,7 +1189,7 @@ onMounted(async () => {
               </div>
               <div
                 class="col-12 q-mt-sm"
-                v-if="formData.disciplineInvestigateRelevantDocs.length === 0"
+                v-if="formData.disciplineInvestigateRelevantDocs && formData.disciplineInvestigateRelevantDocs.length === 0"
               >
                 <q-card class="q-pa-md" bordered> ไม่มีรายการเอกสาร </q-card>
               </div>
diff --git a/src/modules/11_discipline/components/3_InvestigateDisciplinary/EditPage.vue b/src/modules/11_discipline/components/3_InvestigateDisciplinary/EditPage.vue
index 29df9467b..a5c962492 100644
--- a/src/modules/11_discipline/components/3_InvestigateDisciplinary/EditPage.vue
+++ b/src/modules/11_discipline/components/3_InvestigateDisciplinary/EditPage.vue
@@ -33,6 +33,7 @@ const route = useRoute();
 
 const id = ref<string>(route.params.id as string);
 const data = ref<object>();
+const status = ref<string>("")
 
 /** function fetchData สอบสวนความผิดทางวินัย*/
 async function fetchDetailDisciplinary() {
@@ -41,6 +42,7 @@ async function fetchDetailDisciplinary() {
     .get(config.API.disciplineDisciplinaryById(id.value))
     .then((res) => {
       data.value = res.data.result;
+      status.value = res.data.result.status
     })
     .catch((err) => {
       messageError($q, err);
@@ -148,7 +150,6 @@ async function onSubmitDisciplinary(data: any) {
  * @param id ระบุ บุคคล
  */
 const onSubmit = async (id: string) => {
-  console.log("edit");
   router.push(`/discipline/disciplinary`);
 };
 
@@ -157,8 +158,8 @@ function sentIssue() {
   dialogConfirm(
     $q,
     () => confirmSentIssue(),
-    "ยืนยันส่งไปออกคำสั่ง",
-    "ต้องการยืนยันส่งไปออกคำสั่งใช่หรือไม่?"
+    "ยืนยันส่งไปสรุปผลการพิจารณา",
+    "ต้องการยืนยันส่งไปสรุปผลการพิจารณาใช่หรือไม่?"
   );
 }
 
@@ -309,24 +310,30 @@ const dataInvestigatefacts = reactive<FormInvestigateFact>({
       <div class="q-ma-none">แก้ไขการสอบสวนความผิดทางวินัย</div>
       <q-space />
       <div class="q-gutter-x-sm">
-        <!-- <q-btn
-          v-if="data.complaintStatus === 'NEW'"
+        <q-btn
+          v-if="status === 'NEW'"
           label="ส่งไปสรุปผลการพิจารณา"
           color="public"
           @click="sentIssue"
         />
         <q-btn
-          v-if="data.complaintStatus === 'NEW'"
+          v-if="status === 'NEW'"
+          label="ส่งไปพักราชการ"
+          color="primary"
+          @click="sentIssue"
+        />
+        <q-btn
+          v-if="status === 'NEW'"
           label="ยุติเรื่อง"
           color="red-7"
           @click="endInvestigate"
         />
         <q-btn
-          v-if="data.complaintStatus === 'STOP'"
+          v-if="status === 'STOP'"
           label="ยกเลิกการยุติเรื่อง"
           color="red-7"
           @click="cancelInvestigate"
-        /> -->
+        />
       </div>
     </div>
     <q-card flat class="col-12">
@@ -363,7 +370,6 @@ const dataInvestigatefacts = reactive<FormInvestigateFact>({
         </q-tab-panel>
       </q-tab-panels>
     </q-card>
-    <!-- <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
index 0b0578cc7..781434e3b 100644
--- a/src/modules/11_discipline/components/3_InvestigateDisciplinary/Form.vue
+++ b/src/modules/11_discipline/components/3_InvestigateDisciplinary/Form.vue
@@ -43,6 +43,7 @@ const route = useRoute();
 const $q = useQuasar();
 
 const id = ref<string>(route.params.id as string);
+const isUpdate = ref<boolean>(false);
 const type = ref<string>("");
 const modal = ref<boolean>(false);
 const rows = ref<Director[]>([]);
@@ -54,7 +55,7 @@ function toggleModal() {
   modalPerson.value = !modalPerson.value;
 }
 
-/** หัวตาราง */
+/** หัวตารางของรายการผู้ถูกสอบสวน กรณีบุคคล */
 const columnsPerson = ref<QTableProps["columns"]>([
   {
     name: "no",
@@ -147,6 +148,16 @@ const formData = reactive<FormData>({
   result: "", // ผลการสอบสวน
   directors: [],
   persons: [],
+  clickTime: false,
+  disciplinaryDateStart: null, // วันที่เริ่มการสอบสวน
+  disciplinaryDateEnd: null, // วันที่สิ้นสุดการสอบสวน
+  daysExtend: 0,
+  disciplinaryDateInvestigation: null, // วันที่มีคำสั่งให้สอบสวน
+  disciplinaryDateResult: null, //วันที่รายงานผลการสอบสวน
+  disciplinaryStatusResult: "",
+  disciplinaryCauseText: "",
+  disciplinaryResult: "",
+
   // detailComplaint: "",
   // whereInvestigate: "",
   // trueDetail: "",
@@ -162,6 +173,7 @@ const formData = reactive<FormData>({
   // organizationId: "",
   // consideredAgency: "",
 });
+const disciplineDisciplinary_DocRelevants = ref<FileLists[]>([]); // ยังไม่มีรอ api
 const disciplineDisciplinary_DocSummaryEvidences = ref<FileLists[]>([]);
 const disciplineDisciplinary_DocRecordAccusers = ref<FileLists[]>([]);
 const disciplineDisciplinary_DocWitnessess = ref<FileLists[]>([]);
@@ -181,22 +193,35 @@ const disciplinarySummaryEvidenceRef = ref<Object | null>(null);
 const disciplinaryRecordAccuserRef = ref<Object | null>(null);
 const disciplinaryWitnessesRef = ref<Object | null>(null);
 const resultRef = ref<Object | null>(null);
+const dateRef = ref<Object | null>(null);
+const dateEndRef = ref<Object | null>(null);
+const daysExtendRef = ref<Object | null>(null);
+const disciplinaryDateResultRef = ref<Object | null>(null);
+const disciplinaryStatusResultRef = ref<Object | null>(null);
+const disciplinaryCauseTextRef = ref<Object | null>(null);
+const disciplinaryResultRef = ref<Object | null>(null);
 
 /** maping ref เข้าตัวแปรเพื่อเตรียมตรวจสอบ */
 const objectdisciplinary: DisciplinaryRef = {
   respondentType: respondentTypeRef,
   organizationId: organizationIdRef,
   consideredAgency: consideredAgencyRef,
-  disciplinaryDateAllegation: disciplinaryDateAllegationRef,
-  disciplinaryDateEvident: disciplinaryDateEvidentRef,
-  disciplinaryCaseFault: disciplinaryCaseFaultRef,
-  disciplinaryInvestigateAt: disciplinaryInvestigateAtRef,
+  // disciplinaryDateAllegation: disciplinaryDateAllegationRef,
+  // disciplinaryDateEvident: disciplinaryDateEvidentRef,
+  // disciplinaryCaseFault: disciplinaryCaseFaultRef,
+  // disciplinaryInvestigateAt: disciplinaryInvestigateAtRef,
   disciplinaryFaultLevel: disciplinaryFaultLevelRef,
-  disciplinaryRefLaw: disciplinaryRefLawRef,
-  disciplinarySummaryEvidence: disciplinarySummaryEvidenceRef,
-  disciplinaryRecordAccuser: disciplinaryRecordAccuserRef,
-  disciplinaryWitnesses: disciplinaryWitnessesRef,
-  result: resultRef,
+  // disciplinaryRefLaw: disciplinaryRefLawRef,
+  // disciplinarySummaryEvidence: disciplinarySummaryEvidenceRef,
+  // disciplinaryRecordAccuser: disciplinaryRecordAccuserRef,
+  // disciplinaryWitnesses: disciplinaryWitnessesRef,
+  // result: resultRef,
+  date: dateRef,
+  dateEnd: dateEndRef,
+  daysExtend: daysExtendRef,
+  disciplinaryDateResult: disciplinaryDateResultRef,
+  disciplinaryStatusResult: disciplinaryStatusResultRef,
+  disciplinaryResult: disciplinaryResultRef,
 };
 
 const initialPagination = ref<any>({
@@ -250,6 +275,18 @@ function validateForm() {
   }
 }
 
+/**
+ * ฟังชั้นคำนวณเวลาวันที่สิ้นสุดจาก วันที่สิ้นสุดการสอบสวน
+ * @param val จำนวนวันที่ต้องการขยาย
+ */
+function calEndDate(val: string) {
+  const date = new Date(props.data.investigationDateEnd);
+  const dateNew = new Date();
+  formData.disciplinaryDateEnd = new Date(
+    dateNew.setDate(date.getDate() + Number(val))
+  );
+}
+
 /**
  * ฟังก์ชั่นสำหรับบันทึกข้อมูล ระบบจะแสดง dialog ให้ยืนยันการบันทึก
  * หากยืนยันจะส่งข้อมูลไปบันทึกที่ api
@@ -290,6 +327,8 @@ async function fetchDatadetail() {
     formData.result = props.data.result;
     formData.directors = props.data.director ?? [];
     formData.persons = props.data.persons ?? [];
+    formData.disciplinaryDateStart = props.data.disciplinaryDateStart ?? null;
+    formData.disciplinaryDateEnd = props.data.disciplinaryDateEnd ?? null;
     disciplineDisciplinary_DocSummaryEvidences.value =
       props.data.disciplineDisciplinary_DocSummaryEvidences;
     disciplineDisciplinary_DocRecordAccusers.value =
@@ -311,7 +350,7 @@ async function fetchDatadetail() {
         position: e.position ? e.position : "-",
         email: e.email ? e.email : "-",
         phone: e.phone ? e.phone : "-",
-        total: e.total ?? "-",
+        total: Number(e.total) ?? "-",
         duty: e.duty ? e.duty : "-",
       })
     );
@@ -460,70 +499,71 @@ onMounted(async () => {
 });
 </script>
 <template>
-  <div class="col-xs-12 col-sm-12 col-md-11">
-    <form @submit.prevent="validateForm">
-      <div class="col-12">
-        <q-card>
-          <div class="col-12 row q-pa-md">
-            <div class="col-12 row q-col-gutter-md">
-              <div class="col-xs-12 col-sm-3">
-                <q-select
-                  for="SelectrespondentType"
-                  v-model="formData.respondentType"
-                  ref="respondentTypeRef"
-                  dense
-                  outlined
-                  label="ผู้ถูกร้องเรียน"
-                  option-value="id"
-                  option-label="name"
-                  emit-value
-                  use-input
-                  map-options
-                  hide-bottom-space
-                  :options="complainstStore.complainantoptions"
-                  :rules="[(val) => !!val || `${'กรุณาเลือกผู้ร้องเรียน'}`]"
-                  lazy-rules
-                  @update:model-value="
-                    selectComplainant(formData.respondentType)
-                  "
-                  @filter="(inputValue: any,
+  <div class="row col-12 bg-white">
+    <div class="col-sm-12 col-md-9">
+      <form @submit.prevent="validateForm">
+        <div class="col-12">
+          <q-card bordered>
+            <div class="col-12 row q-pa-md">
+              <div class="col-12 row q-col-gutter-md">
+                <div class="col-xs-12 col-sm-3">
+                  <q-select
+                    for="SelectrespondentType"
+                    v-model="formData.respondentType"
+                    ref="respondentTypeRef"
+                    dense
+                    outlined
+                    label="ผู้ถูกร้องเรียน"
+                    option-value="id"
+                    option-label="name"
+                    emit-value
+                    use-input
+                    map-options
+                    hide-bottom-space
+                    :options="complainstStore.complainantoptions"
+                    :rules="[(val) => !!val || `${'กรุณาเลือกผู้ร้องเรียน'}`]"
+                    lazy-rules
+                    @update:model-value="
+                      selectComplainant(formData.respondentType)
+                    "
+                    @filter="(inputValue: any,
                 doneFn: Function) => filterSelector(inputValue, doneFn, 'filterrespondentType'
                 )"
+                  >
+                    <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-xs-12 col-sm-3"
+                  v-if="formData.respondentType === 'ORGANIZATION'"
+                  id="organizationId"
                 >
-                  <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-xs-12 col-sm-3"
-                v-if="formData.respondentType === 'ORGANIZATION'"
-                id="organizationId"
-              >
-                <q-select
-                  for="inputOffice"
-                  name="organizationId"
-                  ref="organizationIdRef"
-                  dense
-                  hide-bottom-space
-                  outlined
-                  option-label="name"
-                  option-value="id"
-                  emit-value
-                  map-options
-                  v-model="formData.organizationId"
-                  :options="organizationOption"
-                  label="เลือกสำนักงาน"
-                  :rules="[(val) => !!val || `${'กรุณาเลือกสำนักงาน'}`]"
-                  lazy-rules
-                />
-              </div>
-              <div class="col-xs-12 col-sm-3" id="consideredAgency">
-                <!-- <q-select
+                  <q-select
+                    for="inputOffice"
+                    name="organizationId"
+                    ref="organizationIdRef"
+                    dense
+                    hide-bottom-space
+                    outlined
+                    option-label="name"
+                    option-value="id"
+                    emit-value
+                    map-options
+                    v-model="formData.organizationId"
+                    :options="organizationOption"
+                    label="เลือกสำนักงาน"
+                    :rules="[(val) => !!val || `${'กรุณาเลือกสำนักงาน'}`]"
+                    lazy-rules
+                  />
+                </div>
+                <div class="col-xs-12 col-sm-3" id="consideredAgency">
+                  <!-- <q-select
                   ref="consideredAgencyRef"
                   for="selectAgency"
                   dense
@@ -551,427 +591,812 @@ onMounted(async () => {
                     </q-item>
                   </template>
                 </q-select> -->
-              </div>
+                </div>
 
-              <div
-                v-if="formData.respondentType !== 'ORGANIZATION'"
-                class="col-6"
-              ></div>
-              <div
-                class="row col-12"
-                v-if="formData.respondentType === 'PERSON'"
-              >
-                <q-card
-                  bordered
+                <div
+                  v-if="formData.respondentType !== 'ORGANIZATION'"
+                  class="col-6"
+                ></div>
+                <div
                   class="row col-12"
-                  style="border: 1px solid #d6dee1"
+                  v-if="formData.respondentType === 'PERSON'"
                 >
-                  <div
-                    class="col-xs-12 col-sm-12 text-weight-medium bg-grey-1 q-py-xs q-px-md"
+                  <q-card
+                    bordered
+                    class="row col-12"
+                    style="border: 1px solid #d6dee1"
                   >
-                    ผู้ถูกร้องเรียน
-                    <q-btn
-                      size="12px"
-                      flat
-                      round
-                      dense
-                      color="add"
-                      class="q-ml-sm"
-                      icon="mdi-plus"
-                      @click="toggleModal"
+                    <div
+                      class="col-xs-12 col-sm-12 text-weight-medium bg-grey-1 q-py-xs q-px-md"
                     >
-                      <q-tooltip>เพิ่มผู้ถูกร้องเรียน</q-tooltip>
-                    </q-btn>
-                  </div>
-                  <div class="col-12"><q-separator /></div>
-                  <div class="col-xs-12 q-pa-sm">
-                    <d-table
-                      ref="table"
-                      :columns="columnsPerson"
-                      :rows="formData.persons"
-                      row-key="personId"
-                      flat
-                      bordered
-                      :paging="true"
-                      dense
-                      class="custom-header-table"
+                      ผู้ถูกร้องเรียน
+                      <q-btn
+                        size="12px"
+                        flat
+                        round
+                        dense
+                        color="add"
+                        class="q-ml-sm"
+                        icon="mdi-plus"
+                        @click="toggleModal"
+                      >
+                        <q-tooltip>เพิ่มผู้ถูกร้องเรียน</q-tooltip>
+                      </q-btn>
+                    </div>
+                    <div class="col-12"><q-separator /></div>
+                    <div class="col-xs-12 q-pa-sm">
+                      <d-table
+                        ref="table"
+                        :columns="columnsPerson"
+                        :rows="formData.persons"
+                        row-key="personId"
+                        flat
+                        bordered
+                        :paging="true"
+                        dense
+                        class="custom-header-table"
+                      >
+                        <template v-slot:header="props">
+                          <q-tr :props="props">
+                            <q-th
+                              v-for="col in props.cols"
+                              :key="col.name"
+                              :props="props"
+                              style="color: #000000; font-weight: 500"
+                            >
+                              <span class="text-weight-medium">{{
+                                col.label
+                              }}</span>
+                            </q-th>
+                          </q-tr>
+                        </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"
+                            >
+                              <div v-if="col.name == 'no'">
+                                {{ props.rowIndex + 1 }}
+                              </div>
+                              <div>
+                                {{ col.value }}
+                              </div>
+                            </q-td>
+                          </q-tr>
+                        </template>
+                      </d-table>
+                    </div>
+                  </q-card>
+                </div>
+
+                <div class="row col-12">
+                  <q-card
+                    bordered
+                    class="col-12"
+                    style="border: 1px solid #d6dee1"
+                  >
+                    <div
+                      class="col-xs-12 col-sm-12 text-weight-medium bg-grey-1 q-py-sm q-px-md"
                     >
-                      <template v-slot:header="props">
-                        <q-tr :props="props">
-                          <q-th
-                            v-for="col in props.cols"
-                            :key="col.name"
-                            :props="props"
-                            style="color: #000000; font-weight: 500"
+                      วันที่สอบสวน
+                      <!-- v-if="
+                        props.data.disciplinaryDateStart &&
+                        props.data.disciplinaryDateStart != null &&
+                        props.data.disciplinaryDateEnd != null
+                      " -->
+
+                      <q-checkbox
+                        for="#clickTime"
+                        size="md"
+                        v-model="formData.clickTime"
+                        label="ขยายเวลา"
+                        color="primary"
+                        dense
+                        class="text-weight-medium q-ml-sm"
+                        keep-color
+                      />
+                    </div>
+                    <div class="col-12"><q-separator /></div>
+                    <div class="q-pa-sm">
+                      <div class="q-col-gutter-sm row">
+                        <div class="col-3" v-if="!formData.clickTime">
+                          <datepicker
+                            menu-class-name="modalfix"
+                            :readonly="isUpdate"
+                            v-model="formData.disciplinaryDateStart"
+                            :locale="'th'"
+                            autoApply
+                            :enableTimePicker="false"
+                            week-start="0"
                           >
-                            <span class="text-weight-medium">{{
-                              col.label
-                            }}</span>
-                          </q-th>
-                        </q-tr>
-                      </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"
+                            <template #year="{ year }">{{
+                              year + 543
+                            }}</template>
+                            <template #year-overlay-value="{ value }">{{
+                              parseInt(value + 543)
+                            }}</template>
+                            <template #trigger>
+                              <q-input
+                                for="#date"
+                                class="full-width cursor-pointer"
+                                ref="dateRef"
+                                :readonly="isUpdate"
+                                outlined
+                                dense
+                                lazy-rules
+                                borderless
+                                hide-bottom-space
+                                :model-value="
+                                  formData.disciplinaryDateStart
+                                    ? date2Thai(formData.disciplinaryDateStart)
+                                    : 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="col-3" v-if="formData.clickTime">
+                          <q-selectinvestigateDis
+                            for="#daysExtend"
+                            outlined
+                            dense
+                            lazy-rules
+                            ref="daysExtendRef"
+                            v-model="formData.daysExtend"
+                            :options="investigateDis.daysExtendOps"
+                            label="จำนวนวันที่ต้องการขยาย"
+                            emit-value
+                            hide-bottom-space
+                            map-options
+                            :rules="[
+                            (val: any) =>
+                              formData.clickTime
+                                ? !!val || 'กรุณาเลือกจำนวนวันที่ต้องการขยาย'
+                                : true,
+                          ]"
+                            option-label="name"
+                            option-value="id"
+                            use-input
+                            @update:model-value="calEndDate"
+                            ><template v-slot:no-option>
+                              <q-item>
+                                <q-item-section class="text-grey">
+                                  ไม่มีข้อมูล
+                                </q-item-section>
+                              </q-item>
+                            </template>
+                          </q-selectinvestigateDis>
+                        </div>
+
+                        <div class="col-3">
+                          <datepicker
+                            menu-class-name="modalfix"
+                            v-model="formData.disciplinaryDateEnd"
+                            :readonly="isUpdate"
+                            :locale="'th'"
+                            autoApply
+                            :enableTimePicker="false"
+                            week-start="0"
                           >
-                            <div v-if="col.name == 'no'">
-                              {{ props.rowIndex + 1 }}
-                            </div>
-                            <div>
-                              {{ col.value }}
-                            </div>
-                          </q-td>
-                        </q-tr>
-                      </template>
-                    </d-table>
-                  </div>
-                </q-card>
-              </div>
+                            <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 cursor-pointer"
+                                :readonly="isUpdate"
+                                outlined
+                                dense
+                                lazy-rules
+                                hide-bottom-space
+                                borderless
+                                :model-value="
+                                  formData.disciplinaryDateEnd
+                                    ? date2Thai(formData.disciplinaryDateEnd)
+                                    : 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>
+                  </q-card>
+                </div>
 
-              <datepicker
-                menu-class-name="modalfix"
-                for="#dateAllegation"
-                v-model="formData.disciplinaryDateAllegation"
-                class="col-xs-12 col-sm-6"
-                :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
-                    ref="disciplinaryDateAllegationRef"
-                    outlined
-                    dense
-                    class="col-xs-12 col-sm-4"
-                    hide-bottom-space
-                    :model-value="
-                      formData.disciplinaryDateAllegation != null
-                        ? date2Thai(formData.disciplinaryDateAllegation)
-                        : null
-                    "
-                    :label="`${'วันที่รับทราบข้อกล่าวหา'}`"
-                    :rules="[
-                      (val) =>
-                        !!val || `${'กรุณาเลือกวันที่รับทราบข้อกล่าวหา'}`,
-                    ]"
-                    lazy-rules
-                  >
-                    <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"
-                for="#dateEvident"
-                v-model="formData.disciplinaryDateEvident"
-                :locale="'th'"
-                autoApply
-                class="col-xs-12 col-sm-6"
-                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
-                    ref="disciplinaryDateEvidentRef"
-                    outlined
-                    dense
-                    class="full-width datepicker"
-                    hide-bottom-space
-                    :model-value="
-                      formData.disciplinaryDateEvident != null
-                        ? date2Thai(formData.disciplinaryDateEvident)
-                        : null
-                    "
-                    :label="`${'วันที่สรุปพยานหลักฐาน'}`"
-                    :rules="[
-                      (val) => !!val || `${'กรุณาเลือกวันที่สรุปพยานหลักฐาน'}`,
-                    ]"
-                    lazy-rules
-                  >
-                    <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="row col-12">
-                <q-card
-                  bordered
-                  class="row col-12"
-                  style="border: 1px solid #d6dee1"
+                <datepicker
+                  menu-class-name="modalfix"
+                  for="#dateAllegation"
+                  v-model="formData.disciplinaryDateAllegation"
+                  class="col-xs-12 col-sm-3"
+                  :locale="'th'"
+                  autoApply
+                  borderless
+                  :enableTimePicker="false"
+                  week-start="0"
                 >
-                  <div
-                    class="col-xs-12 col-sm-12 text-weight-medium bg-grey-1 q-py-xs q-px-md"
-                  >
-                    กรรมการ
-                    <q-btn
-                      size="12px"
-                      flat
-                      round
+                  <template #year="{ year }">
+                    {{ year + 543 }}
+                  </template>
+                  <template #year-overlay-value="{ value }">
+                    {{ parseInt(value + 543) }}
+                  </template>
+                  <template #trigger>
+                    <q-input
+                      ref="disciplinaryDateAllegationRef"
+                      outlined
                       dense
-                      color="add"
-                      class="q-ml-sm"
-                      @click="popup()"
-                      icon="mdi-plus"
-                    >
-                      <q-tooltip>เพิ่มกรรมการ</q-tooltip>
-                    </q-btn>
-                  </div>
-                  <div class="col-12"><q-separator /></div>
-                  <div class="col-xs-12 q-pa-sm row">
-                    <Table
-                      class="col-12"
-                      style="max-height: 80vh"
-                      :rows="rows"
-                      :columns="investigateDis.columnsDirector"
-                      :filter="filter"
-                      :visible-columns="investigateDis.visibleColumnsDirector"
-                      v-model:inputfilter="filter"
-                      v-model:inputvisible="
-                        investigateDis.visibleColumnsDirector
+                      class="col-xs-12 col-sm-4"
+                      hide-bottom-space
+                      :model-value="
+                        formData.disciplinaryDateAllegation != null
+                          ? date2Thai(formData.disciplinaryDateAllegation)
+                          : null
                       "
-                      :pagination="initialPagination"
-                      :nornmalData="true"
-                      :paging="true"
-                      :titleText="''"
+                      :label="`${'วันที่รับทราบข้อกล่าวหา'}`"
+                      :rules="[
+                        (val) =>
+                          !!val || `${'กรุณาเลือกวันที่รับทราบข้อกล่าวหา'}`,
+                      ]"
+                      lazy-rules
                     >
-                      <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 v-slot:prepend>
+                        <q-icon
+                          name="event"
+                          class="cursor-pointer"
+                          style="color: var(--q-primary)"
+                        >
+                        </q-icon>
                       </template>
-                    </Table>
-                  </div>
-                </q-card>
+                    </q-input>
+                  </template>
+                </datepicker>
+
+                <datepicker
+                  menu-class-name="modalfix"
+                  for="#dateAllegation"
+                  v-model="formData.disciplinaryDateInvestigation"
+                  class="col-xs-12 col-sm-3"
+                  :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"
+                      hide-bottom-space
+                      :model-value="
+                        formData.disciplinaryDateInvestigation != null
+                          ? date2Thai(formData.disciplinaryDateInvestigation)
+                          : null
+                      "
+                      :label="`${'วันที่มีคำสั่งให้สอบสวน'}`"
+                      :rules="[
+                        (val) =>
+                          !!val || `${'กรุณาเลือกวันที่มีคำสั่งให้สอบสวน'}`,
+                      ]"
+                      lazy-rules
+                    >
+                      <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"
+                  for="#dateEvident"
+                  v-model="formData.disciplinaryDateEvident"
+                  :locale="'th'"
+                  autoApply
+                  class="col-xs-12 col-sm-3"
+                  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
+                      ref="disciplinaryDateEvidentRef"
+                      outlined
+                      dense
+                      class="full-width datepicker"
+                      hide-bottom-space
+                      :model-value="
+                        formData.disciplinaryDateEvident != null
+                          ? date2Thai(formData.disciplinaryDateEvident)
+                          : null
+                      "
+                      :label="`${'วันที่สรุปพยานหลักฐาน'}`"
+                      :rules="[
+                        (val) =>
+                          !!val || `${'กรุณาเลือกวันที่สรุปพยานหลักฐาน'}`,
+                      ]"
+                      lazy-rules
+                    >
+                      <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"
+                  for="#dateEvident"
+                  v-model="formData.disciplinaryDateResult"
+                  :locale="'th'"
+                  autoApply
+                  class="col-xs-12 col-sm-3"
+                  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
+                      ref="disciplinaryDateResultRef"
+                      outlined
+                      dense
+                      class="full-width datepicker"
+                      hide-bottom-space
+                      :model-value="
+                        formData.disciplinaryDateResult != null
+                          ? date2Thai(formData.disciplinaryDateResult)
+                          : null
+                      "
+                      :label="`${'วันที่รายงานผลการสอบสวน'}`"
+                      :rules="[
+                        (val) =>
+                          !!val || `${'กรุณาเลือกวันที่รายงานผลการสอบสวน'}`,
+                      ]"
+                      lazy-rules
+                    >
+                      <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="row col-12">
+                  <q-card
+                    bordered
+                    class="row col-12"
+                    style="border: 1px solid #d6dee1"
+                  >
+                    <div
+                      class="col-xs-12 col-sm-12 text-weight-medium bg-grey-1 q-py-xs q-px-md"
+                    >
+                      รายชื่อกรรมการเพื่อพิจารณาความผิดทางวินัย
+                      <q-btn
+                        size="12px"
+                        flat
+                        round
+                        dense
+                        color="add"
+                        class="q-ml-sm"
+                        @click="popup()"
+                        icon="mdi-plus"
+                      >
+                        <q-tooltip>เพิ่มกรรมการ</q-tooltip>
+                      </q-btn>
+                    </div>
+                    <div class="col-12"><q-separator /></div>
+                    <div class="col-xs-12 q-pa-sm row">
+                      <Table
+                        class="col-12"
+                        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-card>
+                </div>
+                <q-input
+                  class="col-xs-12 col-sm-3"
+                  dense
+                  outlined
+                  ref="disciplinaryCaseFaultRef"
+                  v-model="formData.disciplinaryCaseFault"
+                  for="#casefault"
+                  label="กรณีมีความผิด"
+                  hide-bottom-space
+                  :rules="[(val) => !!val || `${'กรุณากรอกกรณีมีความผิด'}`]"
+                  lazy-rules
+                />
+
+                <q-input
+                  class="col-xs-12 col-sm-3"
+                  dense
+                  hide-bottom-space
+                  outlined
+                  for="#whereInvestigate"
+                  ref="disciplinaryInvestigateAtRef"
+                  v-model="formData.disciplinaryInvestigateAt"
+                  label="สอบสวนที่"
+                  :rules="[(val) => !!val || `${'กรุณากรอกสอบสวนที่'}`]"
+                  lazy-rules
+                />
+
+                <q-select
+                  dense
+                  class="col-xs-12 col-sm-3"
+                  outlined
+                  for="#faultLevel"
+                  ref="disciplinaryFaultLevelRef"
+                  v-model="formData.disciplinaryFaultLevel"
+                  option-label="name"
+                  option-value="id"
+                  emit-value
+                  map-options
+                  hide-bottom-space
+                  :options="investigateDis.optionsfaultLevel"
+                  label="ระดับโทษความผิด"
+                  :rules="[(val) => !!val || `${'กรุณาเลือกระดับโทษความผิด'}`]"
+                  lazy-rules
+                  group-label="group"
+                  group-values="options"
+                >
+                </q-select>
+
+                <q-input
+                  class="col-xs-12 col-sm-3"
+                  dense
+                  for="#refLaw"
+                  hide-bottom-space
+                  outlined
+                  ref="disciplinaryRefLawRef"
+                  v-model="formData.disciplinaryRefLaw"
+                  label="อ้างอิงมาตราตามกฎหมาย"
+                  :rules="[
+                    (val) => !!val || `${'กรุณากรอกอ้างอิงมาตราตามกฎหมาย'}`,
+                  ]"
+                  lazy-rules
+                />
+
+                <q-input
+                  class="col-xs-12 col-sm-6"
+                  dense
+                  outlined
+                  for="#evidence"
+                  ref="disciplinarySummaryEvidenceRef"
+                  hide-bottom-space
+                  v-model="formData.disciplinarySummaryEvidence"
+                  label="สรุปพยานหลักฐานสนับสนุนข้อกล่าวหา"
+                  type="textarea"
+                  :rules="[(val:string) => !!val || `${'กรุณากรอกสรุปพยานหลักฐานสนับสนุนข้อกล่าวหา'}`]"
+                  lazy-rules
+                />
+
+                <q-input
+                  class="col-xs-12 col-sm-6"
+                  dense
+                  outlined
+                  ref="disciplinaryRecordAccuserRef"
+                  for="#recordAccuser"
+                  v-model="formData.disciplinaryRecordAccuser"
+                  label="บันทึกถ้อยคำของผู้กล่าวหา"
+                  hide-bottom-space
+                  type="textarea"
+                  :rules="[(val:string) => !!val || `${'กรุณากรอกบันทึกถ้อยคำของผู้กล่าวหา'}`]"
+                  lazy-rules
+                />
+
+                <q-input
+                  class="col-xs-12 col-sm-6"
+                  dense
+                  outlined
+                  for="#witnesses"
+                  ref="disciplinaryWitnessesRef"
+                  v-model="formData.disciplinaryWitnesses"
+                  label="พยานและบันทึกถ้อยคำพยาน"
+                  hide-bottom-space
+                  type="textarea"
+                  :rules="[(val:string) => !!val || `${'กรุณากรอกพยานและบันทึกถ้อยคำพยาน'}`]"
+                  lazy-rules
+                />
+
+                <q-input
+                  class="col-xs-12 col-sm-6"
+                  dense
+                  outlined
+                  for="#InvestResults"
+                  ref="resultRef"
+                  v-model="formData.result"
+                  label="ผลการสอบสวน"
+                  hide-bottom-space
+                  type="textarea"
+                  :rules="[(val:string) => !!val || `${'กรุณากรอกผลการสอบสวน'}`]"
+                  lazy-rules
+                />
+
+                <div class="row col-12">
+                  <q-card
+                    bordered
+                    class="row col-12"
+                    style="border: 1px solid #d6dee1"
+                  >
+                    <div
+                      class="col-xs-12 col-sm-12 text-weight-medium bg-grey-1 q-py-xs q-px-md"
+                    >
+                      ผลการสอบสวน
+                    </div>
+
+                    <div class="col-12"><q-separator /></div>
+
+                    <div class="col-xs-12 q-pa-sm row">
+                      <div class="row col-12 q-col-gutter-md">
+                        <div class="col-3">
+                          <q-select
+                            for="#fault"
+                            outlined
+                            dense
+                            :readonly="isUpdate"
+                            lazy-rules
+                            ref="disciplinaryStatusResultRef"
+                            v-model="formData.disciplinaryStatusResult"
+                            :rules="[
+                              (val) => !!val || `${'กรุณาเลือกผลการสอบสวน'}`,
+                            ]"
+                            :options="investigateDis.offenseDetailsOps"
+                            label="ผลการสอบสวน"
+                            emit-value
+                            map-options
+                            option-label="name"
+                            option-value="id"
+                            use-input
+                            @filter="(inputValue: any,
+                doneFn: Function) => investigateDis.filterFnOptionsType(inputValue, doneFn, 'offenseDetailsOps'
+                )"
+                            ><template v-slot:no-option>
+                              <q-item>
+                                <q-item-section class="text-grey">
+                                  ไม่มีข้อมูล
+                                </q-item-section>
+                              </q-item>
+                            </template>
+                          </q-select>
+                        </div>
+
+                        <div
+                          v-if="
+                            formData.disciplinaryStatusResult == 'HAVE_CAUSE'
+                          "
+                          class="col-3"
+                        >
+                          <q-select
+                            for="#fault"
+                            outlined
+                            dense
+                            ref="disciplinaryCauseTextRef"
+                            v-model="formData.disciplinaryCauseText"
+                            :rules="[
+                              (val) =>
+                                !!val || `${'กรุณาเลือกร้ายแรง/ไม่ร้ายแรง'}`,
+                            ]"
+                            :options="
+                              investigateDis.causeTextOptions
+                            "
+                            label="ร้ายแรง/ไม่ร้ายแรง"
+                            emit-value
+                            map-options
+                            option-label="name"
+                            option-value="id"
+                            use-input
+                            ><template v-slot:no-option>
+                              <q-item>
+                                <q-item-section class="text-grey">
+                                  ไม่มีข้อมูล
+                                </q-item-section>
+                              </q-item>
+                            </template>
+                          </q-select>
+                        </div>
+                      </div>
+
+                      <div class="row col-12">
+                        <q-input
+                          class="full-width cursor-pointer"
+                          outlined
+                          ref="disciplinaryResultRef"
+                          dense
+                          lazy-rules
+                          borderless
+                          v-model="formData.disciplinaryResult"
+                          :rules="[(val) => !!val || `${'กรุณากรอกเหตุผล'}`]"
+                          hide-bottom-space
+                          :label="`${'เหตุผล'}`"
+                          type="textarea"
+                        />
+                      </div>
+                    </div>
+                  </q-card>
+                </div>
               </div>
-              <q-input
-                class="col-xs-12 col-sm-3"
-                dense
-                outlined
-                ref="disciplinaryCaseFaultRef"
-                v-model="formData.disciplinaryCaseFault"
-                for="#casefault"
-                label="กรณีมีความผิด"
-                hide-bottom-space
-                :rules="[(val) => !!val || `${'กรุณากรอกกรณีมีความผิด'}`]"
-                lazy-rules
-              />
-
-              <q-input
-                class="col-xs-12 col-sm-3"
-                dense
-                hide-bottom-space
-                outlined
-                for="#whereInvestigate"
-                ref="disciplinaryInvestigateAtRef"
-                v-model="formData.disciplinaryInvestigateAt"
-                label="สอบสวนที่"
-                :rules="[(val) => !!val || `${'กรุณากรอกสอบสวนที่'}`]"
-                lazy-rules
-              />
-
-              <q-select
-                dense
-                class="col-xs-12 col-sm-3"
-                outlined
-                for="#faultLevel"
-                ref="disciplinaryFaultLevelRef"
-                v-model="formData.disciplinaryFaultLevel"
-                option-label="name"
-                option-value="id"
-                emit-value
-                map-options
-                hide-bottom-space
-                :options="investigateDis.optionsfaultLevel"
-                label="ระดับโทษความผิด"
-                :rules="[(val) => !!val || `${'กรุณาเลือกระดับโทษความผิด'}`]"
-                lazy-rules
-                group-label="group"
-                group-values="options"
-              >
-              </q-select>
-
-              <q-input
-                class="col-xs-12 col-sm-3"
-                dense
-                for="#refLaw"
-                hide-bottom-space
-                outlined
-                ref="disciplinaryRefLawRef"
-                v-model="formData.disciplinaryRefLaw"
-                label="อ้างอิงมาตราตามกฎหมาย"
-                :rules="[
-                  (val) => !!val || `${'กรุณากรอกอ้างอิงมาตราตามกฎหมาย'}`,
-                ]"
-                lazy-rules
-              />
-
-              <q-input
-                class="col-xs-12 col-sm-6"
-                dense
-                outlined
-                for="#evidence"
-                ref="disciplinarySummaryEvidenceRef"
-                hide-bottom-space
-                v-model="formData.disciplinarySummaryEvidence"
-                label="สรุปพยานหลักฐานสนับสนุนข้อกล่าวหา"
-                type="textarea"
-                :rules="[(val:string) => !!val || `${'กรุณากรอกสรุปพยานหลักฐานสนับสนุนข้อกล่าวหา'}`]"
-                lazy-rules
-              />
-
-              <q-input
-                class="col-xs-12 col-sm-6"
-                dense
-                outlined
-                ref="disciplinaryRecordAccuserRef"
-                for="#recordAccuser"
-                v-model="formData.disciplinaryRecordAccuser"
-                label="บันทึกถ้อยคำของผู้กล่าวหา"
-                hide-bottom-space
-                type="textarea"
-                :rules="[(val:string) => !!val || `${'กรุณากรอกบันทึกถ้อยคำของผู้กล่าวหา'}`]"
-                lazy-rules
-              />
-
-              <q-input
-                class="col-xs-12 col-sm-6"
-                dense
-                outlined
-                for="#witnesses"
-                ref="disciplinaryWitnessesRef"
-                v-model="formData.disciplinaryWitnesses"
-                label="พยานและการบันทึกถ้อยคำ"
-                hide-bottom-space
-                type="textarea"
-                :rules="[(val:string) => !!val || `${'กรุณากรอกพยานและการบันทึกถ้อยคำ'}`]"
-                lazy-rules
-              />
-
-              <q-input
-                class="col-xs-12 col-sm-6"
-                dense
-                outlined
-                for="#InvestResults"
-                ref="resultRef"
-                v-model="formData.result"
-                label="ผลการสอบสวน"
-                hide-bottom-space
-                type="textarea"
-                :rules="[(val:string) => !!val || `${'กรุณากรอกผลการสอบสวน'}`]"
-                lazy-rules
-              />
             </div>
-          </div>
-          <q-separator />
-          <div class="row col-12 q-pa-sm">
-            <q-space />
-            <q-btn
-              for="ButtonOnSubmit"
-              id="formSubmit"
-              color="secondary"
-              label="บันทึก"
-              type="submit"
-              ><q-tooltip>บับทึกข้อมูล</q-tooltip></q-btn
-            >
-          </div>
-        </q-card>
+            <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>
 
-        <UploadFile
-          title="อัปโหลดหลักฐานสนับสนุนข้อกล่าวหา"
-          label="ไฟล์เอกสารหลักฐานสรุปพยานหลักฐานสนับสนุนข้อกล่าวหา"
-          :files="disciplineDisciplinary_DocSummaryEvidences"
-          :id="id"
-          type="summaryEvidence"
-          :fetchData="props.fetchData"
-        />
-        <UploadFile
-          title="อัปโหลดบันทึกถ้อยคำของผู้กล่าวหา"
-          label="ไฟล์เอกสารบันทึกถ้อยคำของผู้กล่าวหา"
-          :files="disciplineDisciplinary_DocRecordAccusers"
-          :id="id"
-          type="recordAccuser"
-          :fetchData="props.fetchData"
-        />
-        <UploadFile
-          title="อัปโหลดพยานและการบันทึกถ้อยคำ"
-          label="ไฟล์เอกสารพยานและการบันทึกถ้อยคำ"
-          :files="disciplineDisciplinary_DocWitnessess"
-          :id="id"
-          type="witnesses"
-          :fetchData="props.fetchData"
-        />
-        <UploadFile
-          title="อัปโหลดไฟล์เอกสารหลักฐานอื่น ๆ"
-          label="ไฟล์เอกสารหลักฐานอื่น ๆ"
-          :files="disciplineDisciplinary_DocOthers"
-          :id="id"
-          type="other"
-          :fetchData="props.fetchData"
-        />
-      </div>
-    </form>
+    <!-- อัพโหลดไฟล์ -->
+    <div class="col-sm-12 col-md-3">
+      <!-- ยังไม่มี api  -->
+      <UploadFile
+        title="อัปโหลดไฟล์เอกสารที่เกี่ยวข้องกับการสอบสวน"
+        label="เลือกไฟล์"
+        :files="disciplineDisciplinary_DocRelevants"
+        :id="id"
+        type="relevants"
+        :fetchData="props.fetchData"
+      />
+
+      <UploadFile
+        title="อัปโหลดหลักฐานสนับสนุนข้อกล่าวหา"
+        label="เลือกไฟล์"
+        :files="disciplineDisciplinary_DocSummaryEvidences"
+        :id="id"
+        type="summaryEvidence"
+        :fetchData="props.fetchData"
+      />
+      <UploadFile
+        title="อัปโหลดบันทึกถ้อยคำของผู้กล่าวหา"
+        label="เลือกไฟล์"
+        :files="disciplineDisciplinary_DocRecordAccusers"
+        :id="id"
+        type="recordAccuser"
+        :fetchData="props.fetchData"
+      />
+      <UploadFile
+        title="อัปโหลดพยานและการบันทึกถ้อยคำ"
+        label="เลือกไฟล์"
+        :files="disciplineDisciplinary_DocWitnessess"
+        :id="id"
+        type="witnesses"
+        :fetchData="props.fetchData"
+      />
+      <UploadFile
+        title="อัปโหลดไฟล์เอกสารหลักฐานอื่น ๆ"
+        label="เลือกไฟล์"
+        :files="disciplineDisciplinary_DocOthers"
+        :id="id"
+        type="other"
+        :fetchData="props.fetchData"
+      />
+    </div>
   </div>
 
+  <!-- Popup ผู้ถูกร้องเรียน -->
   <DialogAddPersonal
     title="ผู้ถูกร้องเรียน"
     :checkId="formData.persons"
diff --git a/src/modules/11_discipline/components/4_Result/EditPage.vue b/src/modules/11_discipline/components/4_Result/EditPage.vue
index 1d8518ef8..b8e66eab8 100644
--- a/src/modules/11_discipline/components/4_Result/EditPage.vue
+++ b/src/modules/11_discipline/components/4_Result/EditPage.vue
@@ -97,9 +97,9 @@ onMounted(async () => {
         active-bg-color="teal-1"
         active-class="text-primary"
       >
-        <q-tab name="complaints" label="เรื่องร้องเรียน" />
-        <q-tab name="investigatefacts" label="สืบสวนข้อเท็จจริง" />
-        <q-tab name="disciplinary" label="สอบสวนความผิดทางวินัย" />
+        <q-tab name="complaints" label="เรื่องร้องเรียน (สำเนา)" />
+        <q-tab name="investigatefacts" label="สืบสวนข้อเท็จจริง (สำเนา)" />
+        <q-tab name="disciplinary" label="สอบสวนความผิดทางวินัย (สำเนา)" />
         <q-tab name="result" label="ผลการพิจารณาทางวินัย" />
       </q-tabs>
       <q-separator />
diff --git a/src/modules/11_discipline/components/7_ListSuspend/DialogHeader.vue b/src/modules/11_discipline/components/7_ListSuspend/DialogHeader.vue
new file mode 100644
index 000000000..7bc9b4207
--- /dev/null
+++ b/src/modules/11_discipline/components/7_ListSuspend/DialogHeader.vue
@@ -0,0 +1,39 @@
+<script setup lang="ts">
+/** props*/
+const props = defineProps({
+  title: String,
+  close: {
+    type: Function,
+    default: () => console.log("not function"),
+  },
+});
+
+/**
+ * ฟังก์ชั่น close
+ */
+const close = async () => {
+  props.close();
+};
+</script>
+<template>
+  <q-toolbar class="q-py-md">
+    <q-toolbar-title class="header-text">{{ title }}</q-toolbar-title>
+    <q-btn
+      icon="close"
+      unelevated
+      round
+      dense
+      @click="close"
+      style="color: #ff8080; background-color: #ffdede"
+    />
+  </q-toolbar>
+</template>
+
+<style scoped lang="scss">
+.header-text {
+  font-size: 18px;
+  font-weight: 600;
+  line-height: 26px;
+  color: #35373c;
+}
+</style>
diff --git a/src/modules/11_discipline/components/7_ListSuspend/DialogSendToCommand.vue b/src/modules/11_discipline/components/7_ListSuspend/DialogSendToCommand.vue
new file mode 100644
index 000000000..e2f0dc7eb
--- /dev/null
+++ b/src/modules/11_discipline/components/7_ListSuspend/DialogSendToCommand.vue
@@ -0,0 +1,267 @@
+<script setup lang="ts">
+import { ref, computed, watchEffect } from "vue";
+import { useQuasar } from "quasar";
+import { useCounterMixin } from "@/stores/mixin";
+import type { QTableProps } from "quasar";
+import type { ResponseItems } from "@/modules/06_retirement/interface/response/Main";
+import DialogHeader from "@/modules/11_discipline/components/7_ListSuspend/DialogHeader.vue";
+import http from "@/plugins/http";
+import config from "@/app.config";
+
+/** use */
+const $q = useQuasar();
+const selected = ref<ResponseItems[]>([]);
+const mixin = useCounterMixin();
+const { showLoader, success, messageError, dialogConfirm, hideLoader } = mixin;
+
+/** คอลัมน์ */
+const columns2 = ref<QTableProps["columns"]>([
+  {
+    name: "no",
+    align: "left",
+    label: "ลำดับ",
+    sortable: false,
+    field: "no",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "fullname",
+    align: "left",
+    label: "ชื่อ-นามสกุล",
+    sortable: true,
+    field: "fullname",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "position",
+    align: "left",
+    label: "ตำแหน่งในสายงาน",
+    sortable: true,
+    field: "position",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "positionLevel",
+    align: "left",
+    label: "ระดับ",
+    sortable: true,
+    field: "positionLevel",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "organizationPositionOld",
+    align: "left",
+    label: "สังกัด",
+    sortable: true,
+    field: "organizationPositionOld",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "statustext",
+    align: "left",
+    label: "สถานะ",
+    sortable: true,
+    field: "statustext",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+]);
+
+/** คอลัมน์ที่แสดง */
+const visibleColumns2 = ref<string[]>([
+  "no",
+  "fullname",
+  "position",
+  "positionLevel",
+  "positionNumberOld",
+  "organizationPositionOld",
+  "statustext",
+]);
+
+/** props*/
+const props = defineProps({
+  modal: Boolean,
+  closeModal: Function,
+  getData: Function,
+  rows2: Array,
+  filterKeyword2: String,
+});
+
+/**
+ * ฟังก์ชั่นการ Selected Data
+ */
+const checkSelected = computed(() => {
+  if (selected.value.length === 0) {
+    return true;
+  }
+});
+
+//popup ยืนยันส่งัว
+const saveOrder = () => {
+  dialogConfirm(
+    $q,
+    () => Ordersave(),
+    "ยืนยันส่งไปออกคำสั่ง",
+    "ต้องการยืนยันส่งไปออกคำสั่งใช่หรือไม่?"
+  );
+};
+
+//ส่งไปออกคำสั่ง
+const Ordersave = async () => {
+  const id = selected.value.map((r) => r.id);
+  const body = {
+    id,
+  };
+  showLoader();
+  await http
+    .post(config.API.outReport, body)
+    .then((res: any) => {
+      success($q, "ส่งไปออกคำสั่งสำเร็จ");
+      props.closeModal?.();
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(async () => {
+      props.getData?.();
+      hideLoader();
+    });
+};
+
+const emit = defineEmits(["update:filterKeyword2", "update:selected"]);
+const updateInput = (value: any) => {
+  emit("update:filterKeyword2", value);
+};
+
+//รีเซ็ตค่าในช่องค้นหา
+const Reset = () => {
+  emit("update:filterKeyword2", "");
+};
+watchEffect(() => {
+  if (props.modal === true) {
+    selected.value = [];
+  }
+});
+</script>
+<template>
+  <q-dialog v-model="props.modal">
+    <q-card style="width: 1200px; max-width: 80vw">
+      <DialogHeader title="ส่งไปออกคำสั่ง" :close="closeModal" />
+      <q-separator />
+      <q-card-section class="q-pt-none">
+        <div class="row justify-end">
+          <div class="col-5">
+            <q-toolbar style="padding: 0">
+              <q-input
+                borderless
+                outlined
+                dense
+                debounce="300"
+                :model-value="filterKeyword2"
+                @update:model-value="updateInput"
+                placeholder="ค้นหา"
+                style="width: 850px; max-width: auto"
+              >
+                <template v-slot:append>
+                  <q-icon v-if="filterKeyword2 == ''" name="search" />
+                  <q-icon
+                    v-if="filterKeyword2 !== ''"
+                    name="clear"
+                    class="cursor-pointer"
+                    @click="Reset"
+                  />
+                </template>
+              </q-input>
+              <q-select
+                v-model="visibleColumns2"
+                multiple
+                outlined
+                dense
+                options-dense
+                :display-value="$q.lang.table.columns"
+                emit-value
+                map-options
+                :options="columns2"
+                option-value="name"
+                options-cover
+                style="min-width: 150px"
+                class="gt-xs q-ml-sm"
+              />
+            </q-toolbar>
+          </div>
+        </div>
+
+        <d-table
+          :columns="columns2"
+          :rows="rows2"
+          :filter="filterKeyword2"
+          row-key="id"
+          :visible-columns="visibleColumns2"
+          selection="multiple"
+          v-model:selected="selected"
+        >
+          <template v-slot:header-selection="scope">
+            <q-checkbox
+              keep-color
+              color="primary"
+              dense
+              v-model="scope.selected"
+            />
+          </template>
+
+          <template v-slot:body="props">
+            <q-tr :props="props" class="cursor-pointer">
+              <q-td>
+                <q-checkbox
+                  keep-color
+                  color="primary"
+                  dense
+                  v-model="props.selected"
+                />
+              </q-td>
+              <q-td key="no" :props="props">
+                {{ props.rowIndex + 1 }}
+              </q-td>
+              <q-td key="fullname" :props="props">
+                {{ props.row.fullname }}
+              </q-td>
+              <q-td key="position" :props="props">
+                {{ props.row.position }}
+              </q-td>
+              <q-td key="positionLevel" :props="props">
+                {{ props.row.positionLevel }}
+              </q-td>
+              <q-td key="organizationPositionOld" :props="props">
+                <div class="table_ellipsis">
+                  {{ props.row.organizationPositionOld }}
+                </div>
+              </q-td>
+              <q-td key="organization" :props="props">
+                <div class="table_ellipsis">
+                  {{ props.row.organization }}
+                </div>
+              </q-td>
+              <q-td key="statustext" :props="props">
+                {{ props.row.statustext }}
+              </q-td>
+            </q-tr>
+          </template>
+        </d-table>
+      </q-card-section>
+
+      <q-card-actions align="right" class="bg-white text-teal">
+        <q-btn
+          label="ส่งไปออกคำสั่ง"
+          @click="saveOrder"
+          :disable="checkSelected"
+          color="public"
+        />
+      </q-card-actions>
+    </q-card>
+  </q-dialog>
+</template>
diff --git a/src/modules/11_discipline/components/7_ListSuspend/DismissOrder.vue b/src/modules/11_discipline/components/7_ListSuspend/DismissOrder.vue
new file mode 100644
index 000000000..781416f10
--- /dev/null
+++ b/src/modules/11_discipline/components/7_ListSuspend/DismissOrder.vue
@@ -0,0 +1,382 @@
+<script setup lang="ts">
+import { ref, onMounted } from "vue";
+import type { QTableProps } from "quasar";
+import { useQuasar } from "quasar";
+import { useRouter } from "vue-router";
+import { useCounterMixin } from "@/stores/mixin";
+import { useTransferDataStore } from "@/modules/05_placement/store";
+import http from "@/plugins/http";
+import config from "@/app.config";
+import DialogSendToCommand from "@/modules/11_discipline/components/7_ListSuspend/DialogSendToCommand.vue";
+import type { ResponseData } from "@/modules/06_retirement/interface/response/out";
+
+/** use */
+const $q = useQuasar();
+const router = useRouter();
+const mixin = useCounterMixin();
+const transferStore = useTransferDataStore();
+const {
+  date2Thai,
+  messageError,
+  showLoader,
+  hideLoader,
+  success,
+  dialogMessage,
+} = mixin;
+const { statusText } = transferStore;
+const modal = ref<boolean>(false);
+
+/** คอลัมน์ที่แสดง */
+const visibleColumns = ref<string[]>([
+  "no",
+  "fullname",
+  "position",
+  "positionLevel",
+  "organizationPositionOld",
+  "createdAt",
+  "statustext",
+]);
+
+//ค้นหา คอลัมน์ คอลัมน์ที่แสดง
+const filterKeyword = ref<string>("");
+const filterKeyword2 = ref<string>("");
+const filterRef = ref<any>(null);
+
+//ค้นหา คอลัมน์ คอลัมน์ที่แสดง
+const rows = ref<ResponseData[]>([]);
+const rows2 = ref<ResponseData[]>([]);
+const filters = ref<ResponseData[]>([]);
+const columns = ref<QTableProps["columns"]>([
+  {
+    name: "no",
+    align: "left",
+    label: "ลำดับ",
+    sortable: false,
+    field: "no",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "fullname",
+    align: "left",
+    label: "ชื่อ-นามสกุล",
+    sortable: true,
+    field: "fullname",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "position",
+    align: "left",
+    label: "ตำแหน่งในสายงาน",
+    sortable: true,
+    field: "position",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "positionLevel",
+    align: "left",
+    label: "ระดับ",
+    sortable: true,
+    field: "positionLevel",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "organizationPositionOld",
+    align: "left",
+    label: "สังกัด",
+    sortable: true,
+    field: "organizationPositionOld",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "createdAt",
+    align: "left",
+    label: "วันที่ดำเนินการ",
+    sortable: true,
+    field: "createdAt",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "statustext",
+    align: "left",
+    label: "สถานะ",
+    sortable: true,
+    field: "statustext",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+]);
+onMounted(async () => {
+  await getData();
+});
+
+const openModalOrder = () => {
+  openModal();
+  const row = filters.value.filter(
+    (r: ResponseData) =>
+      (r.status == "WAITTING" ||
+        r.status == "PENDING" ||
+        r.status == "APPROVE") &&
+      r.organizationPositionOld &&
+      r.positionTypeOld &&
+      r.positionLevelOld &&
+      r.positionNumberOld &&
+      r.salary &&
+      r.organization &&
+      r.date
+  );
+  rows2.value = row;
+};
+
+//นำข้อมูลมาแสดง
+const getData = async () => {
+  showLoader();
+  await http
+    .get(config.API.retirementOut)
+    .then((res: any) => {
+      const data = res.data.result;
+      let list: ResponseData[] = [];
+      data.map((r: ResponseData) => {
+        list.push({
+          createdAt: date2Thai(r.createdAt),
+          date: r.date,
+          firstName: r.firstName ?? "",
+          id: r.id ?? "",
+          isActive: r.isActive ? r.isActive : false,
+          lastName: r.lastName ?? "",
+          organization: r.organization ?? "",
+          organizationPositionOld: r.organizationPositionOld ?? "",
+          posNo: r.posNo ?? "",
+          position: r.position ?? "",
+          positionLevel: r.positionLevel ?? "",
+          positionLevelOld: r.positionLevelOld ?? "",
+          positionNumberOld: r.positionNumberOld ?? "",
+          positionTypeOld: r.positionTypeOld ?? "",
+          prefix: r.prefix ?? "",
+          reason: r.reason ?? "",
+          salary: r.salary ? r.salary : 0,
+          status: r.status ?? "",
+          statustext: statusText(r.status ?? ""),
+          fullname: `${r.prefix ?? ""}${r.firstName ?? ""} ${r.lastName ?? ""}`,
+        });
+      });
+      rows.value = list;
+      filters.value = list;
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+};
+
+const clickDelete = async (id: string) => {
+  dialogMessage(
+    $q,
+    `ลบข้อมูล`,
+    `ต้องการทำการลบข้อมูลนี้ใช่หรือไม่?`,
+    "delete",
+    "ยืนยัน",
+    "red",
+    async () => await deleteData(id),
+    async () => await getData()
+  );
+};
+
+const deleteData = async (id: string) => {
+  await http
+    .delete(config.API.outByid(id))
+    .then((res) => {
+      success($q, "ลบข้อมูลสำเร็จ");
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(async () => {
+      await getData();
+    });
+};
+
+const openModal = () => (modal.value = true);
+const closeModal = () => (modal.value = false);
+
+const resetFilter = () => {
+  filterKeyword.value = "";
+  filterKeyword2.value = "";
+  filterRef.value.focus();
+};
+const pagination = ref({
+  sortBy: "createdAt",
+  descending: true,
+  page: 1,
+  rowsPerPage: 10,
+});
+</script>
+<template>
+  <div class="toptitle text-dark col-12 row items-center">รายชื่อผู้ถูกพักราชการ</div>
+  <q-card flat bordered class="col-12 q-mt-sm">
+    <q-separator />
+    <div class="row q-pa-md">
+      <div class="col-12">
+        <div class="row col-12">
+          <q-btn
+            @click="openModalOrder"
+            size="14px"
+            flat
+            round
+            color="add"
+            icon="mdi-account-arrow-right"
+          >
+            <q-tooltip>ส่งไปออกคำสั่ง</q-tooltip>
+          </q-btn>
+
+          <q-space />
+          <q-input
+            class="col-xs-12 col-sm-3 col-md-2"
+            standout
+            dense
+            v-model="filterKeyword"
+            ref="filterRef"
+            outlined
+            debounce="300"
+            placeholder="ค้นหา"
+          >
+            <template v-slot:append>
+              <q-icon v-if="filterKeyword == ''" name="search" />
+              <q-icon
+                v-if="filterKeyword !== ''"
+                name="clear"
+                class="cursor-pointer"
+                @click="resetFilter"
+              />
+            </template>
+          </q-input>
+
+          <q-select
+            v-model="visibleColumns"
+            multiple
+            outlined
+            dense
+            options-dense
+            :display-value="$q.lang.table.columns"
+            emit-value
+            map-options
+            :options="columns"
+            option-value="name"
+            options-cover
+            style="min-width: 150px"
+            class="col-xs-12 col-sm-3 col-md-2 q-ml-sm"
+          />
+        </div>
+
+        <div class="col-12 q-pt-sm">
+          <d-table
+            :columns="columns"
+            :rows="rows"
+            :filter="filterKeyword"
+            row-key="id"
+            :visible-columns="visibleColumns"
+            v-model:pagination="pagination"
+          >
+            <template v-slot:header="props">
+              <q-tr :props="props">
+                <q-th v-for="col in props.cols" :key="col.name" :props="props">
+                  <span class="text-weight-medium">{{ col.label }}</span>
+                </q-th>
+                <q-th auto-width />
+              </q-tr>
+            </template>
+            <template v-slot:body="props">
+              <q-tr :props="props" class="cursor-pointer">
+                <q-td
+                  key="no"
+                  :props="props"
+                  @click="router.push(`/retirement/out/${props.row.id}`)"
+                >
+                  {{ props.rowIndex + 1 }}
+                </q-td>
+                <q-td
+                  key="fullname"
+                  :props="props"
+                  @click="router.push(`/retirement/out/${props.row.id}`)"
+                >
+                  {{ props.row.fullname }}
+                </q-td>
+                <q-td
+                  key="position"
+                  :props="props"
+                  @click="router.push(`/retirement/out/${props.row.id}`)"
+                >
+                  {{ props.row.position }}
+                </q-td>
+                <q-td
+                  key="positionLevel"
+                  :props="props"
+                  @click="router.push(`/retirement/out/${props.row.id}`)"
+                >
+                  {{ props.row.positionLevel }}
+                </q-td>
+                <q-td
+                  key="organizationPositionOld"
+                  :props="props"
+                  @click="router.push(`/retirement/out/${props.row.id}`)"
+                >
+                  <div class="table_ellipsis">
+                    {{ props.row.organizationPositionOld }}
+                  </div>
+                </q-td>
+                <q-td
+                  key="organization"
+                  :props="props"
+                  @click="router.push(`/retirement/out/${props.row.id}`)"
+                >
+                  <div class="table_ellipsis">
+                    {{ props.row.organization }}
+                  </div>
+                </q-td>
+                <q-td key="createdAt" :props="props">
+                  {{ props.row.createdAt }}
+                </q-td>
+                <q-td key="statustext" :props="props">
+                  {{ props.row.statustext }}
+                </q-td>
+                <q-td auto-width>
+                  <q-btn
+                    v-if="
+                      props.row.status !== 'DONE' &&
+                      props.row.status !== 'REPORT'
+                    "
+                    dense
+                    size="12px"
+                    flat
+                    round
+                    color="red"
+                    @click="clickDelete(props.row.id)"
+                    icon="mdi-delete"
+                  >
+                    <q-tooltip>ลบข้อมูล</q-tooltip>
+                  </q-btn>
+                </q-td>
+              </q-tr>
+            </template>
+          </d-table>
+        </div>
+      </div>
+    </div>
+  </q-card>
+
+  <DialogSendToCommand
+    v-model:modal="modal"
+    :closeModal="closeModal"
+    :rows2="rows2"
+    v-model:filterKeyword2="filterKeyword2"
+    :fecthlistRecevice="getData"
+  />
+</template>
+<style scoped lang="scss"></style>
diff --git a/src/modules/11_discipline/components/7_ListSuspend/OutRegistry.vue b/src/modules/11_discipline/components/7_ListSuspend/OutRegistry.vue
new file mode 100644
index 000000000..0608a1301
--- /dev/null
+++ b/src/modules/11_discipline/components/7_ListSuspend/OutRegistry.vue
@@ -0,0 +1,474 @@
+<script setup lang="ts">
+import { onMounted, ref } from "vue";
+import { useQuasar } from "quasar";
+import { useRoute, useRouter } from "vue-router";
+import { useCounterMixin } from "@/stores/mixin";
+import CurrencyInput from "@/components/CurruncyInput.vue";
+import http from "@/plugins/http";
+import config from "@/app.config";
+import keycloak from "@/plugins/keycloak";
+
+/**Import type */
+import type { QForm } from "quasar";
+import type { ResponseDataDetail } from "@/modules/06_retirement/interface/response/expulsion";
+
+/** use */
+const $q = useQuasar();
+const route = useRoute();
+const router = useRouter();
+const mixin = useCounterMixin();
+const dataId = route.params.id.toString();
+const {
+  date2Thai,
+  dialogMessage,
+  messageError,
+  showLoader,
+  hideLoader,
+  success,
+} = mixin;
+
+/**
+ * กำหนดค่าตัวแปร
+ */
+const myForm = ref<QForm | null>(null);
+const roleAdmin = ref<boolean>(false);
+const edit = ref<boolean>(false);
+const organizationPositionOld = ref<string>("");
+const positionTypeOld = ref<string>("");
+const positionLevelOld = ref<string>("");
+const posNo = ref<string>("");
+const salary = ref<number>(0);
+const organization = ref<string>("");
+const date = ref<Date | null>(null);
+const reason = ref<string>("");
+const responseData = ref<ResponseDataDetail>({
+  personId: "",
+  avataPath: "",
+  createdAt: new Date(),
+  date: new Date(),
+  id: "",
+  organization: "",
+  organizationPositionOld: "",
+  positionLevelOld: "",
+  positionNumberOld: "",
+  positionTypeOld: "",
+  reason: "",
+  salary: 0,
+  status: "",
+  fullname: "",
+});
+
+/** Hook */
+onMounted(async () => {
+  if (keycloak.tokenParsed != null) {
+    roleAdmin.value = await keycloak.tokenParsed.role.includes("placement1");
+  }
+  await getData();
+});
+
+//นำข้อมูลจาก API มาแสดง
+const getData = async () => {
+  showLoader();
+  await http
+    .get(config.API.outByid(dataId))
+    .then((res) => {
+      const data = res.data.result;
+      responseData.value.personId = data.profileId;
+      responseData.value.createdAt = data.createdAt;
+      responseData.value.date =
+        data.date !== null ? new Date(data.date) : new Date();
+      responseData.value.id = data.id ?? "";
+      responseData.value.organization = data.organization ?? "";
+      responseData.value.organizationPositionOld =
+        data.organizationPositionOld ?? "";
+      responseData.value.positionLevelOld = data.positionLevelOld ?? "";
+      responseData.value.positionNumberOld = data.positionNumberOld ?? "";
+      responseData.value.positionTypeOld = data.positionTypeOld ?? "";
+      responseData.value.reason = data.reason ?? "";
+      responseData.value.salary = data.salary !== null ? data.salary : 0;
+      responseData.value.status = data.status ?? "";
+      responseData.value.avataPath = data.avatar ?? "";
+      responseData.value.fullname = `${data.firstName ?? "-"} ${
+        data.lastName ?? "-"
+      }`;
+
+      organizationPositionOld.value = data.organizationPositionOld ?? "";
+      positionTypeOld.value = data.positionTypeOld ?? "";
+      positionLevelOld.value = data.positionLevelOld ?? "";
+      posNo.value = data.positionNumberOld ?? "";
+      salary.value = data.salary ?? "";
+      organization.value = data.organization ?? "";
+      date.value = data.date !== null ? new Date(data.date) : null;
+      reason.value = data.reason ?? "";
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+};
+
+/**
+ * ฟังก์ชั่น Cancle
+ */
+const clickCancel = async () => {
+  await getData();
+  edit.value = false;
+};
+
+/**
+ * ฟังก์ชั่น Save
+ */
+const conditionSave = async () => {
+  if (myForm.value !== null) {
+    myForm.value.validate().then((success) => {
+      if (success) {
+        dialogMessage(
+          $q,
+          "ต้องการแก้ไขข้อมูลหรือไม่?",
+          "แก้ไขข้อมูลเพื่อลงบัญชีแนบท้าย",
+          "mdi-help-circle-outline",
+          "ตกลง",
+          "public",
+          async () => await saveData(),
+          undefined
+        );
+      }
+    });
+  }
+};
+
+/**
+ * ฟังก์ชั่น Saveจาก API
+ */
+const saveData = async () => {
+  const body = {
+    organization: organization.value,
+    reason: reason.value,
+    organizationPositionOld: organizationPositionOld.value,
+    date: date.value,
+    positionTypeOld: positionTypeOld.value,
+    positionLevelOld: positionLevelOld.value,
+    positionNumberOld: posNo.value,
+    amountOld: salary.value,
+  };
+  showLoader();
+  await http
+    .put(config.API.outByid(dataId), body)
+    .then((res: any) => {
+      success($q, "แก้ไขข้อมูลเพื่อลงบัญชีแนบท้ายสำเร็จ");
+      edit.value = false;
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(async () => {
+      await getData();
+      hideLoader();
+    });
+};
+
+/**
+ * Function เพิ่ม Class เวลา Edit
+ * @param val เมื่อเป็นEdit จะเปลี่ยน Class
+ */
+const getClass = (val: boolean) => {
+  return {
+    "full-width inputgreen cursor-pointer": val,
+    "full-width cursor-pointer": !val,
+  };
+};
+</script>
+<template>
+  <div class="toptitle text-dark col-12 row items-center">
+    <q-btn
+      icon="mdi-arrow-left"
+      unelevated
+      round
+      dense
+      flat
+      color="primary"
+      class="q-mr-sm"
+      @click="router.go(-1)"
+    />
+    รายละเอียดการของ {{ responseData.fullname }}
+  </div>
+  <q-card bordered class="row col-12 text-dark">
+    <div class="bg-grey-1 q-pa-sm col-12 row items-center text-primary">
+      <div class="q-pl-sm text-weight-bold text-subtitle2">
+        {{ responseData.fullname }}
+      </div>
+      <q-space />
+      <q-btn
+        outline
+        color="blue"
+        dense
+        icon-right="mdi-open-in-new"
+        class="q-px-sm"
+        label="ดูข้อมูลทะเบียนประวัติ"
+        @click="router.push(`/registry/${responseData.personId}`)"
+      />
+    </div>
+    <div class="col-12"><q-separator /></div>
+    <div class="row col-12 q-pa-md">
+      <div class="col-12 row bg-white q-col-gutter-md">
+        <div class="col-xs-3 col-sm-2 col-md-1 row">
+          <q-img
+            :src="responseData.avataPath"
+            v-if="responseData.avataPath !== ''"
+          />
+          <q-img src="@/assets/avatar_user.jpg" v-else />
+        </div>
+        <div class="col-xs-6 col-sm-3 row items-center">
+          <div class="col-12 q-pl-md">
+            <div class="col-12 text-top">ตำแหน่งในสายงาน</div>
+            <div class="col-12 text-detail">
+              {{ responseData.positionTypeOld }}
+            </div>
+          </div>
+        </div>
+        <div class="col-xs-6 col-sm-3 row items-center">
+          <div class="col-12">
+            <div class="col-12 text-top">ระดับ</div>
+            <div class="col-12 text-detail">
+              {{ responseData.positionLevelOld }}
+            </div>
+          </div>
+        </div>
+        <div class="col-xs-6 col-sm-3 row items-center">
+          <div class="col-12">
+            <div class="col-12 text-top">สังกัด</div>
+            <div class="col-12 text-detail">
+              {{ responseData.organizationPositionOld }}
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </q-card>
+
+  <q-card bordered class="row col-12 text-dark q-mt-sm">
+    <div class="bg-grey-1 q-pa-sm col-12 row items-center text-primary">
+      <div class="q-pl-sm text-weight-bold text-dark">
+        แก้ไขข้อมูลเพื่อลงบัญชีแนบท้าย
+      </div>
+      <q-space />
+      <div
+        v-if="
+          responseData.status !== 'DONE' && responseData.status !== 'REPORT'
+        "
+      >
+        <div class="q-gutter-sm" v-if="!edit">
+          <q-btn
+            outline
+            color="primary"
+            dense
+            icon-right="mdi-file-edit-outline"
+            class="q-px-sm"
+            label="แก้ไข"
+            style="width: 80px"
+            @click="edit = !edit"
+          />
+        </div>
+        <div class="q-gutter-sm" v-else>
+          <q-btn
+            outline
+            color="public"
+            dense
+            class="q-px-sm"
+            label="บันทึก"
+            style="width: 80px"
+            @click="conditionSave"
+          />
+          <q-btn
+            outline
+            color="red"
+            dense
+            class="q-px-sm"
+            label="ยกเลิก"
+            style="width: 80px"
+            @click="clickCancel"
+          />
+        </div>
+      </div>
+    </div>
+    <div class="col-12"><q-separator /></div>
+    <q-form ref="myForm">
+      <div class="row col-12 q-pa-md">
+        <div class="col-12 row bg-white q-col-gutter-md">
+          <div class="col-xs-12 row items-center">
+            <div class="col-12">
+              <div class="text-weight-bold">ตำแหน่งและหน่วยงานเดิม</div>
+            </div>
+            <div class="col-12">
+              <q-input
+                :class="getClass(edit)"
+                :outlined="edit"
+                dense
+                lazy-rules
+                :readonly="!edit"
+                :borderless="!edit"
+                v-model="organizationPositionOld"
+                :rules="[(val) => !!val || `${'กรุณากรอกตำแหน่ง/สังกัด'}`]"
+                hide-bottom-space
+                :label="`${'ตำแหน่ง/สังกัด'}`"
+                type="textarea"
+              />
+            </div>
+          </div>
+          <div class="col-xs-6 col-sm-3 row">
+            <div class="col-12">
+              <q-input
+                :class="getClass(edit)"
+                :outlined="edit"
+                dense
+                lazy-rules
+                :readonly="!edit"
+                :borderless="!edit"
+                v-model="positionTypeOld"
+                :rules="[(val) => !!val || `${'กรุณากรอกตำแหน่งประเภท'}`]"
+                hide-bottom-space
+                :label="`${'ตำแหน่งประเภท'}`"
+              />
+            </div>
+          </div>
+          <div class="col-xs-6 col-sm-3 row">
+            <div class="col-12">
+              <q-input
+                :class="getClass(edit)"
+                :outlined="edit"
+                dense
+                lazy-rules
+                :readonly="!edit"
+                :borderless="!edit"
+                v-model="positionLevelOld"
+                :rules="[(val) => !!val || `${'กรุณากรอกระดับ'}`]"
+                hide-bottom-space
+                :label="`${'ระดับ'}`"
+              />
+            </div>
+          </div>
+          <div class="col-xs-6 col-sm-3 row">
+            <div class="col-12">
+              <q-input
+                :class="getClass(edit)"
+                :outlined="edit"
+                dense
+                lazy-rules
+                :readonly="!edit"
+                :borderless="!edit"
+                v-model="posNo"
+                :rules="[(val) => !!val || `${'กรุณากรอกเลขที่'}`]"
+                hide-bottom-space
+                :label="`${'เลขที่'}`"
+              />
+            </div>
+          </div>
+          <div class="col-xs-6 col-sm-3 row">
+            <div class="col-12">
+              <CurrencyInput
+                v-model="salary"
+                :edit="edit"
+                :options="{
+                  currency: 'THB',
+                }"
+                :label="`${'เงินเดือน'}`"
+              />
+            </div>
+          </div>
+          <div class="col-12"><q-separator /></div>
+          <div class="col-xs-6 col-sm-6 row">
+            <div class="col-12">
+              <q-input
+                :class="getClass(edit)"
+                :outlined="edit"
+                dense
+                lazy-rules
+                :readonly="!edit"
+                :borderless="!edit"
+                v-model="organization"
+                :rules="[(val) => !!val || `${'กรุณากรอก'}`]"
+                hide-bottom-space
+                :label="`${'สังกัด'}`"
+              />
+            </div>
+          </div>
+          <div class="col-xs-6 col-sm-6 row">
+            <div class="col-12">
+              <datepicker
+                menu-class-name="modalfix"
+                :readonly="!edit"
+                v-model="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
+                    :class="getClass(edit)"
+                    :outlined="edit"
+                    dense
+                    lazy-rules
+                    :readonly="!edit"
+                    :borderless="!edit"
+                    :model-value="date !== null ? date2Thai(date) : null"
+                    :rules="[(val) => !!val || `${'กรุณาเลือกตั้งแต่วัน'}`]"
+                    hide-bottom-space
+                    :label="`${'ตั้งแต่วัน'}`"
+                  >
+                    <template v-slot:prepend>
+                      <q-icon
+                        name="event"
+                        class="cursor-pointer"
+                        :style="
+                          edit
+                            ? 'color: var(--q-primary)'
+                            : 'color: var(--q-grey)'
+                        "
+                      >
+                      </q-icon>
+                    </template>
+                  </q-input>
+                </template>
+              </datepicker>
+            </div>
+          </div>
+          <div class="col-12">
+            <q-input
+              :class="getClass(edit)"
+              :outlined="edit"
+              dense
+              lazy-rules
+              :readonly="!edit"
+              :borderless="!edit"
+              v-model="reason"
+              hide-bottom-space
+              :label="`${'หมายเหตุ '}`"
+              type="textarea"
+            />
+          </div>
+        </div>
+      </div>
+    </q-form>
+  </q-card>
+</template>
+<style lang="scss" scope>
+.q-img {
+  border-radius: 5px;
+  height: 70px;
+}
+.text-top {
+  color: gray;
+  font-weight: 400;
+  padding-bottom: 3px;
+}
+.text-detail {
+  font-weight: 500;
+}
+</style>
diff --git a/src/modules/11_discipline/components/UploadFile.vue b/src/modules/11_discipline/components/UploadFile.vue
index c5635cff4..f30038f8a 100644
--- a/src/modules/11_discipline/components/UploadFile.vue
+++ b/src/modules/11_discipline/components/UploadFile.vue
@@ -98,7 +98,7 @@ function downloadFile(link: string) {
 </script>
 
 <template>
-  <q-card flat class="q-pa-md q-mt-sm">
+  <q-card flat class="q-pa-md" bordered>
     <div class="col-12 row q-col-gutter-md">
       <div class="row col-12">
         <q-card bordered class="row col-12" style="border: 1px solid #d6dee1">
@@ -108,7 +108,7 @@ function downloadFile(link: string) {
           <div class="col-12"><q-separator /></div>
           <div class="col-xs-12 q-pa-sm row">
             <q-file
-              class="col-11 q-mt-sm"
+              class="col-11"
               outlined
               dense
               ref="fileRef"
@@ -130,7 +130,6 @@ function downloadFile(link: string) {
                 round
                 dense
                 color="add"
-                class="q-ml-sm q-mt-sm"
                 icon="mdi-upload"
                 @click="uploadFile()"
                 ><q-tooltip>อัปโหลดไฟล์</q-tooltip></q-btn
@@ -138,7 +137,7 @@ function downloadFile(link: string) {
             </div>
           </div>
 
-          <div class="col-xs-12 q-pa-sm row" v-if="props.files">
+          <div class="col-xs-12 q-pa-sm row" v-if="props.files.length > 0">
             <q-list
               v-if="props.files.length > 0"
               bordered
@@ -184,6 +183,10 @@ function downloadFile(link: string) {
               </q-item>
             </q-list>
           </div>
+
+          <div class="col-12 q-mt-sm" v-if="props.files.length == 0">
+            <q-card class="q-pa-md" bordered> ไม่มีรายการเอกสาร </q-card>
+          </div>
         </q-card>
       </div>
     </div>
diff --git a/src/modules/11_discipline/interface/request/disciplinary.ts b/src/modules/11_discipline/interface/request/disciplinary.ts
index 1bb6f8eb5..4f5d5d2e4 100644
--- a/src/modules/11_discipline/interface/request/disciplinary.ts
+++ b/src/modules/11_discipline/interface/request/disciplinary.ts
@@ -12,8 +12,8 @@ interface Persons {
   name: string;
 }
 interface Director {
-  directorId: string;
-  duty: string;
+  directorId?: string;
+  duty?: string;
   email: string;
   firstName: string;
   id: string;
@@ -21,7 +21,7 @@ interface Director {
   phone: string;
   position: string;
   prefix: string;
-  total: number;
+  total?: number;
 }
 // interface Persons {
 //   personId: string; //id อ้างอิง profile
@@ -52,6 +52,15 @@ interface FormData {
   result: string;
   directors: Director[];
   persons: Persons[];
+  clickTime: boolean;
+  disciplinaryDateStart: Date | null;
+  disciplinaryDateEnd: Date | null;
+  daysExtend: number;
+  disciplinaryDateInvestigation: Date | null;
+  disciplinaryDateResult: Date | null;
+  disciplinaryStatusResult: string;
+  disciplinaryCauseText: string;
+  disciplinaryResult: string;
 
   // filesWitnesses: File | null;
   // filesEtc: File | null;
@@ -74,16 +83,21 @@ interface FormData {
 interface DisciplinaryRef {
   respondentType: object | null;
   organizationId: object | null;
-  disciplinaryDateAllegation: object | null;
-  disciplinaryDateEvident: object | null;
-  disciplinaryCaseFault: object | null;
-  disciplinaryInvestigateAt: object | null;
+  // disciplinaryDateAllegation: object | null;
+  // disciplinaryDateEvident: object | null;
+  // disciplinaryCaseFault: object | null;
+  // disciplinaryInvestigateAt: object | null;
   disciplinaryFaultLevel: object | null;
-  disciplinaryRefLaw: object | null;
-  disciplinarySummaryEvidence: object | null;
-  disciplinaryRecordAccuser: object | null;
-  disciplinaryWitnesses: object | null;
-  result: object | null;
+  // disciplinaryRefLaw: object | null;
+  // disciplinarySummaryEvidence: object | null;
+  // disciplinaryRecordAccuser: object | null;
+  // disciplinaryWitnesses: object | null;
+  // result: object | null;
+  date: object | null;
+  dateEnd: object | null;
+  daysExtend: object | null;
+  disciplinaryDateResult: object | null;
+
   // filesRecordAccuser: object | null;
   // filesWitnesses: object | null;
   // filesEtc: object | null;
diff --git a/src/modules/11_discipline/router.ts b/src/modules/11_discipline/router.ts
index f69308f15..2e26a1b13 100644
--- a/src/modules/11_discipline/router.ts
+++ b/src/modules/11_discipline/router.ts
@@ -59,9 +59,15 @@ const InvestigateDisciplinaryAdd = () =>
 /** หน้ารายการผลการพิจารณาทางวินัย */
 const resultMainPage = () =>
   import("@/modules/11_discipline/components/4_Result/MainPage.vue");
-  const resultEditPage = () =>
+const resultEditPage = () =>
   import("@/modules/11_discipline/components/4_Result/EditPage.vue");
 
+// รายชื่อผู้ถูกพักราชการ
+const listSuspendMainPage = () =>
+  import("@/modules/11_discipline/components/7_ListSuspend/DismissOrder.vue");
+const suspendEditPage = () =>
+  import("@/modules/11_discipline/components/7_ListSuspend/OutRegistry.vue");
+
 export default [
   {
     path: "/discipline/complaints",
@@ -254,6 +260,27 @@ export default [
       Role: "discipline",
     },
   },
+  {
+    path: "/discipline-suspend",
+    name: "disciplineListSuspend",
+    component: listSuspendMainPage,
+    meta: {
+      Auth: true,
+      Key: [11.4],
+      Role: "discipline",
+    },
+  },
+  {
+    path: "/discipline-suspend/:id",
+    name: "disciplineEditSuspend",
+    component: suspendEditPage,
+    meta: {
+      Auth: true,
+      Key: [11.4],
+      Role: "discipline",
+    },
+  },
+
   // {
   //   path: "/discipline-order",
   //   name: "disciplineOrder",
diff --git a/src/modules/11_discipline/store/InvestigateDisStore.ts b/src/modules/11_discipline/store/InvestigateDisStore.ts
index 6c3587d35..7a4b7a283 100644
--- a/src/modules/11_discipline/store/InvestigateDisStore.ts
+++ b/src/modules/11_discipline/store/InvestigateDisStore.ts
@@ -7,6 +7,7 @@ import type {
   directorType,
   responseType,
   DataOptioGroup,
+  DataNumberOption
 } from "@/modules/11_discipline/interface/index/Main";
 import { useCounterMixin } from "@/stores/mixin";
 const mixin = useCounterMixin();
@@ -19,11 +20,20 @@ export const useInvestigateDisStore = defineStore(
     const rows = ref<investigateDisDataRowType[]>([]);
     const rows2 = ref<directorType[]>([]);
     const selected = ref<directorType[]>([]);
-    const optionsTypefault = ref<DataOption[]>([
-      { id: "0", name: "ไม่ระบุ" },
-      { id: "1", name: "ร้ายแรง" },
-      { id: "2", name: "ไม่ร้ายแรง" },
+
+    const daysExtendOps = ref<DataNumberOption[]>([
+      { id: 15, name: "15 วัน" },
+      { id: 30, name: "30 วัน" },
+      { id: 45, name: "45 วัน" },
+      { id: 60, name: "60 วัน" },
     ]);
+
+    const offenseDetailsOps = ref<DataOption[]>([
+      { id: "NOT_SPECIFIED", name: "ยังไม่ระบุ" },
+      { id: "NOT_DEADLY", name: "ไม่ร้ายแรง" },
+      { id: "DEADLY", name: "ร้ายแรง" },
+    ]);
+
     const optionsfaultLevel = ref<DataOptioGroup[]>([
       { id: "0", name: "ไม่ร้ายแรง", disable: true },
       { id: "ภาคทัณฑ์", name: "ภาคทัณฑ์", disable: false },
@@ -41,6 +51,23 @@ export const useInvestigateDisStore = defineStore(
       { id: "ปลดออก", name: "ปลดออก", disable: false },
       { id: "ไล่ออก", name: "ไล่ออก", disable: false },
     ]);
+
+    const statusOps = ref<DataOption[]>([
+      { id: "NEW", name: "กำลังสอบสวน" },
+      { id: "STOP", name: "ยุติเรื่อง" },
+      { id: "COMPLETE", name: "ส่งไปสอบสวน" },
+    ]);
+
+    const causeTextOptions = ref<DataOption[]>([
+      { id: "ร้ายแรง", name: "ร้ายแรง" },
+      { id: "ไม่ร้ายแรง", name: "ไม่ร้ายแรง" },
+    ]);
+
+    function convertStatus(val: string) {
+      const result = statusOps.value.find((x: any) => x.id == val)?.name;
+      return result ? result : "-";
+    }
+
     async function fetchList(data: investigateDisDataRowType[]) {
       let datalist: any[] = data.map((e: any) => ({
         id: e.id,
@@ -49,7 +76,7 @@ export const useInvestigateDisStore = defineStore(
         offenseDetails: convertFault(e.offenseDetails),
         disciplinaryFaultLevel: e.disciplinaryFaultLevel ?? "-",
         disciplinaryCaseFault: e.disciplinaryCaseFault ?? "-",
-        status: e.status ?? "-",
+        status: convertStatus(e.status) ?? "-",
         createdAt: e.createdAt ? date2Thai(e.createdAt) : "-",
       }));
 
@@ -289,23 +316,37 @@ export const useInvestigateDisStore = defineStore(
         headerStyle: "font-size: 14px",
         style: "font-size: 14px",
       },
-      {
-        name: "total",
-        align: "left",
-        label: "จำนวนเรื่องสืบสวน",
-        sortable: true,
-        field: "total",
-        headerStyle: "font-size: 14px",
-        style: "font-size: 14px",
-      },
+      // {
+      //   name: "total",
+      //   align: "left",
+      //   label: "จำนวนเรื่องสืบสวน",
+      //   sortable: true,
+      //   field: "total",
+      //   headerStyle: "font-size: 14px",
+      //   style: "font-size: 14px",
+      // },
     ]);
 
+    function filterFnOptionsType(
+      val: string | number,
+      update: any,
+      type: string
+    ) {
+      update(() => {
+        if (type === "offenseDetailsOps") {
+          offenseDetailsOps.value = offenseDetailsOps.value.filter(
+            (v: any) => v.name.toLowerCase().indexOf(val) > -1
+          );
+        }
+      });
+    }
+
     return {
       tabMenu,
       fetchList,
       rows,
       rows2,
-      optionsTypefault,
+      offenseDetailsOps,
       optionsfaultLevel,
       fecthDirector,
 
@@ -313,6 +354,10 @@ export const useInvestigateDisStore = defineStore(
       columns,
       visibleColumnsDirector,
       columnsDirector,
+      daysExtendOps,
+
+      filterFnOptionsType,
+      causeTextOptions
     };
   }
 );