From f27dc0a73f4cd032ccd60d6888ac13f3ed908d16 Mon Sep 17 00:00:00 2001
From: setthawutttty <stw.ttty@gmail.com>
Date: Tue, 28 Nov 2023 17:22:21 +0700
Subject: [PATCH] =?UTF-8?q?=E0=B9=81=E0=B8=81=E0=B9=89=E0=B8=AA=E0=B8=B7?=
 =?UTF-8?q?=E0=B8=9A=E0=B8=AA=E0=B8=A7=E0=B8=99?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/1_Complaint/Form.vue           |    1 +
 .../2_InvestigateFacts/EditPage.vue           |   22 +-
 .../components/2_InvestigateFacts/Form.vue    | 1315 +++++++++--------
 3 files changed, 696 insertions(+), 642 deletions(-)

diff --git a/src/modules/11_discipline/components/1_Complaint/Form.vue b/src/modules/11_discipline/components/1_Complaint/Form.vue
index 3a39d1898..30888ac93 100644
--- a/src/modules/11_discipline/components/1_Complaint/Form.vue
+++ b/src/modules/11_discipline/components/1_Complaint/Form.vue
@@ -919,6 +919,7 @@ onMounted(() => {
                 dense
                 outlined
                 hide-bottom-space
+                :readonly="formData.status !== 'NEW' && formData.status !== ''"
                 v-model="formData.result"
                 :rules="[
                   (val) => !!val || 'กรุณากรอกผลการตรวจสอบเรื่องร้องเรียน',
diff --git a/src/modules/11_discipline/components/2_InvestigateFacts/EditPage.vue b/src/modules/11_discipline/components/2_InvestigateFacts/EditPage.vue
index 8ac1109b1..c7e614f2c 100644
--- a/src/modules/11_discipline/components/2_InvestigateFacts/EditPage.vue
+++ b/src/modules/11_discipline/components/2_InvestigateFacts/EditPage.vue
@@ -378,6 +378,21 @@ function emitPerson(data: FormData[]) {
     });
 }
 
+/** ยืนยัน ส่งไปออกคำสั่ง */
+function sentIssue() {
+  dialogConfirm(
+    $q,
+    () => confirmSentIssue(),
+    "ยืนยันส่งไปสรุปผลการพิจารณา",
+    "ต้องการยืนยันส่งไปสรุปผลการพิจารณาใช่หรือไม่?"
+  );
+}
+
+/** ฟังชั่น ส่งไปออกคำสั่ง*/
+function confirmSentIssue() {
+  console.log("sent");
+}
+
 /** โหลดข้อมูลเมื่อเข้าหน้านี้ */
 onMounted(() => {
   getData();
@@ -417,7 +432,12 @@ watch(
           color="public"
           @click="sentInvestigate"
         />
-
+        <q-btn
+          v-if="data.status === 'NEW'"
+          label="ส่งไปพักราชการ"
+          color="primary"
+          @click="sentIssue"
+        />
         <q-btn
           v-if="data.status === 'NEW'"
           label="ยุติเรื่อง"
diff --git a/src/modules/11_discipline/components/2_InvestigateFacts/Form.vue b/src/modules/11_discipline/components/2_InvestigateFacts/Form.vue
index c66256872..e8d42cbd0 100644
--- a/src/modules/11_discipline/components/2_InvestigateFacts/Form.vue
+++ b/src/modules/11_discipline/components/2_InvestigateFacts/Form.vue
@@ -527,11 +527,13 @@ onMounted(async () => {
 });
 </script>
 <template>
-  <q-card flat class="q-mt-sm">
-    <form @submit.prevent="validateForm">
-      <div class="q-pa-md q-col-gutter-md">
-        <div class="col-xs-12 row items-start q-col-gutter-md">
-          <!-- <div class="col-6">
+  <div class="row">
+    <div class="col-xs-12 col-sm-12 col-md-9">
+      <q-card flat bordered class="q-mb-md">
+        <form @submit.prevent="validateForm">
+          <div class="q-pa-md q-col-gutter-md">
+            <div class="col-xs-12 row items-start q-col-gutter-md">
+              <!-- <div class="col-6">
             <q-select
               for="#fault"
               outlined
@@ -560,7 +562,7 @@ onMounted(async () => {
             </q-select>
           </div> -->
 
-          <!-- <div class="col-3">
+              <!-- <div class="col-3">
             <q-select
               for="#fault"
               outlined
@@ -588,430 +590,442 @@ onMounted(async () => {
               </template>
             </q-select>
           </div> -->
-          <div class="col-xs-12 col-sm-3">
-            <q-select
-              for="SelectrespondentType"
-              v-model="formData.respondentType"
-              ref="respondentTypeRef"
-              dense
-              outlined
-              :readonly="formData.status !== 'NEW'"
-              label="ผู้ถูกร้องเรียน"
-              option-value="id"
-              option-label="name"
-              emit-value
-              use-input
-              map-options
-              hide-bottom-space
-              :options="investigateFactStore.respondentTypeOps"
-              :rules="[(val) => !!val || `${'กรุณาเลือกผู้ร้องเรียน'}`]"
-              lazy-rules
-              @filter="(inputValue: any,
+              <div class="col-xs-12 col-sm-3">
+                <q-select
+                  for="SelectrespondentType"
+                  v-model="formData.respondentType"
+                  ref="respondentTypeRef"
+                  dense
+                  outlined
+                  :readonly="formData.status !== 'NEW'"
+                  label="ผู้ถูกร้องเรียน"
+                  option-value="id"
+                  option-label="name"
+                  emit-value
+                  use-input
+                  map-options
+                  hide-bottom-space
+                  :options="investigateFactStore.respondentTypeOps"
+                  :rules="[(val) => !!val || `${'กรุณาเลือกผู้ร้องเรียน'}`]"
+                  lazy-rules
+                  @filter="(inputValue: any,
                 doneFn: Function) => investigateFactStore.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>
+                >
+                  <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
-              :readonly="formData.status !== 'NEW'"
-              outlined
-              option-label="name"
-              option-value="id"
-              emit-value
-              map-options
-              v-model="formData.organizationId"
-              :options="investigateFactStore.organizationIdOp"
-              label="เลือกสำนักงาน"
-              :rules="[(val) => !!val || `${'กรุณาเลือกสำนักงาน'}`]"
-              lazy-rules
-            />
-          </div>
-
-          <div class="row col-12" v-if="formData.respondentType === 'PERSON'">
-            <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"
+                class="col-xs-12 col-sm-3"
+                v-if="formData.respondentType === 'ORGANIZATION'"
+                id="organizationId"
               >
-                ผู้ถูกร้องเรียน
-                <q-btn
-                  v-if="formData.status === 'NEW'"
-                  size="12px"
-                  flat
-                  round
+                <q-select
+                  for="inputOffice"
+                  name="organizationId"
+                  ref="organizationIdRef"
                   dense
-                  color="add"
-                  class="q-ml-sm"
-                  @click="toggleModal"
-                  icon="mdi-plus"
-                >
-                  <q-tooltip>เพิ่มผู้ถูกร้องเรียน</q-tooltip>
-                </q-btn>
+                  hide-bottom-space
+                  :readonly="formData.status !== 'NEW'"
+                  outlined
+                  option-label="name"
+                  option-value="id"
+                  emit-value
+                  map-options
+                  v-model="formData.organizationId"
+                  :options="investigateFactStore.organizationIdOp"
+                  label="เลือกสำนักงาน"
+                  :rules="[(val) => !!val || `${'กรุณาเลือกสำนักงาน'}`]"
+                  lazy-rules
+                />
               </div>
-              <div class="col-12"><q-separator /></div>
-              <div class="col-xs-12 q-pa-sm">
-                <d-table
-                  ref="table"
-                  :columns="investigateFactStore.columnsPerson"
-                  :rows="investigateFactStore.rowsAdd"
-                  row-key="idcard"
-                  flat
+
+              <div
+                class="row col-12"
+                v-if="formData.respondentType === 'PERSON'"
+              >
+                <q-card
                   bordered
-                  :paging="true"
-                  dense
-                  class="custom-header-table"
-                  :visible-columns="investigateFactStore.visibleColumnsPerson"
+                  class="row col-12"
+                  style="border: 1px solid #d6dee1"
                 >
-                  <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-th auto-width></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>
-                      <!-- v-if="formData.status === 'NEW'" -->
-                      <q-td auto-width>
-                        <q-btn
-                          v-if="formData.status === 'NEW'"
-                          size="12px"
-                          flat
-                          round
-                          dense
-                          color="red"
-                          class="q-ml-sm"
-                          icon="mdi-delete-outline"
-                          @click="deletePerson(props.row.id)"
-                          ><q-tooltip>ลบผู้ถูกร้องเรียน</q-tooltip></q-btn
-                        >
-                      </q-td>
-                    </q-tr>
-                  </template>
-                </d-table>
+                  <div
+                    class="col-xs-12 col-sm-12 text-weight-medium bg-grey-1 q-py-xs q-px-md"
+                  >
+                    ผู้ถูกร้องเรียน
+                    <q-btn
+                      v-if="formData.status === 'NEW'"
+                      size="12px"
+                      flat
+                      round
+                      dense
+                      color="add"
+                      class="q-ml-sm"
+                      @click="toggleModal"
+                      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">
+                    <d-table
+                      ref="table"
+                      :columns="investigateFactStore.columnsPerson"
+                      :rows="investigateFactStore.rowsAdd"
+                      row-key="idcard"
+                      flat
+                      bordered
+                      :paging="true"
+                      dense
+                      class="custom-header-table"
+                      :visible-columns="
+                        investigateFactStore.visibleColumnsPerson
+                      "
+                    >
+                      <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-th auto-width></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>
+                          <!-- v-if="formData.status === 'NEW'" -->
+                          <q-td auto-width>
+                            <q-btn
+                              v-if="formData.status === 'NEW'"
+                              size="12px"
+                              flat
+                              round
+                              dense
+                              color="red"
+                              class="q-ml-sm"
+                              icon="mdi-delete-outline"
+                              @click="deletePerson(props.row.id)"
+                              ><q-tooltip>ลบผู้ถูกร้องเรียน</q-tooltip></q-btn
+                            >
+                          </q-td>
+                        </q-tr>
+                      </template>
+                    </d-table>
+                  </div>
+                </q-card>
               </div>
-            </q-card>
-          </div>
-          <div class="col-xs-12 col-sm-3">
-            <q-select
-              :readonly="formData.status !== 'NEW'"
-              for="#investigationDetail"
-              outlined
-              hide-bottom-space
-              dense
-              lazy-rules
-              ref="investigationDetailRef"
-              :rules="[(val) => !!val || `${'กรุณาเลือกลักษณะการสืบสวน'}`]"
-              v-model="formData.investigationDetail"
-              :options="investigateFactStore.investigationDetailOp"
-              label="ลักษณะการสืบสวน"
-              emit-value
-              map-options
-              option-label="name"
-              option-value="id"
-              use-input
-              @filter="(inputValue: any,
+              <div class="col-xs-12 col-sm-3">
+                <q-select
+                  :readonly="formData.status !== 'NEW'"
+                  for="#investigationDetail"
+                  outlined
+                  hide-bottom-space
+                  dense
+                  lazy-rules
+                  ref="investigationDetailRef"
+                  :rules="[(val) => !!val || `${'กรุณาเลือกลักษณะการสืบสวน'}`]"
+                  v-model="formData.investigationDetail"
+                  :options="investigateFactStore.investigationDetailOp"
+                  label="ลักษณะการสืบสวน"
+                  emit-value
+                  map-options
+                  option-label="name"
+                  option-value="id"
+                  use-input
+                  @filter="(inputValue: any,
         doneFn: Function) => filterFnOptionsType(inputValue, doneFn, 'investigationOp'
         )"
-              ><template v-slot:no-option>
-                <q-item>
-                  <q-item-section class="text-grey">
-                    ไม่มีข้อมูล
-                  </q-item-section>
-                </q-item>
-              </template>
-            </q-select>
-          </div>
-        </div>
-        <div v-if="formData.investigationDetail === 'OTHER'" class="col-12">
-          <q-input
-            for="#investigationDetailOther"
-            class="full-width cursor-pointer"
-            outlined
-            ref="investigationDetailOtherRef"
-            dense
-            borderless
-            v-model="formData.investigationDetailOther"
-            hide-bottom-space
-            :label="`${'รายการอื่นๆ(โปรดระบุ)'}`"
-            type="textarea"
-            :rules="[
-              (val) =>
-                formData.investigationDetail === 'OTHER'
-                  ? !!val || 'กรุณาเลือกจำนวนวันที่ต้องการขยาย'
-                  : true,
-            ]"
-          />
-        </div>
-
-        <div class="row">
-          <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"
-            >
-              วันที่สืบสวน
-              <q-checkbox
-                v-if="
-                  props.data.investigationDateStart != null &&
-                  props.data.investigationDateEnd != null
-                "
-                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 && statusStep"
-                    v-model="formData.investigationDateStart"
-                    :locale="'th'"
-                    autoApply
-                    :enableTimePicker="false"
-                    week-start="0"
-                  >
-                    <template #year="{ year }">{{ year + 543 }}</template>
-                    <template #year-overlay-value="{ value }">{{
-                      parseInt(value + 543)
-                    }}</template>
-                    <template #trigger>
-                      <q-input
-                        for="#date"
-                        class="full-width cursor-pointer"
-                        ref="dateRef"
-                        :readonly="statusStep && isUpdate"
-                        outlined
-                        dense
-                        lazy-rules
-                        borderless
-                        hide-bottom-space
-                        :model-value="
-                          formData.investigationDateStart
-                            ? date2Thai(formData.investigationDateStart)
-                            : 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-select
-                    for="#daysExtend"
-                    outlined
-                    dense
-                    lazy-rules
-                    ref="daysExtendRef"
-                    v-model="formData.daysExtend"
-                    :options="investigateFactStore.daysExtendOp"
-                    label="จำนวนวันที่ต้องการขยาย"
-                    emit-value
-                    hide-bottom-space
-                    map-options
-                    :rules="[
-                      (val) =>
-                        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-select>
-                </div>
-
-                <div class="col-3">
-                  <datepicker
-                    menu-class-name="modalfix"
-                    v-model="formData.investigationDateEnd"
-                    :readonly="statusStep && isUpdate"
-                    :locale="'th'"
-                    autoApply
-                    :enableTimePicker="false"
-                    week-start="0"
-                  >
-                    <template #year="{ year }">{{ year + 543 }}</template>
-                    <template #year-overlay-value="{ value }">{{
-                      parseInt(value + 543)
-                    }}</template>
-                    <template #trigger>
-                      <q-input
-                        for="#dateEnd"
-                        ref="dateEndRef"
-                        class="full-width cursor-pointer"
-                        :readonly="statusStep && isUpdate"
-                        outlined
-                        dense
-                        lazy-rules
-                        hide-bottom-space
-                        borderless
-                        :model-value="
-                          formData.investigationDateEnd
-                            ? date2Thai(formData.investigationDateEnd)
-                            : 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>
+                  ><template v-slot:no-option>
+                    <q-item>
+                      <q-item-section class="text-grey">
+                        ไม่มีข้อมูล
+                      </q-item-section>
+                    </q-item>
+                  </template>
+                </q-select>
               </div>
             </div>
-          </q-card>
-        </div>
-
-        <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
+            <div v-if="formData.investigationDetail === 'OTHER'" class="col-12">
+              <q-input
+                for="#investigationDetailOther"
+                class="full-width cursor-pointer"
+                outlined
+                ref="investigationDetailOtherRef"
                 dense
-                color="add"
-                class="q-ml-sm"
-                icon="mdi-plus"
-                @click="onClickOpenPopup"
-              >
-                <q-tooltip>เพิ่มกรรมการ</q-tooltip>
-              </q-btn>
+                borderless
+                v-model="formData.investigationDetailOther"
+                hide-bottom-space
+                :label="`${'รายการอื่นๆ(โปรดระบุ)'}`"
+                type="textarea"
+                :rules="[
+                  (val) =>
+                    formData.investigationDetail === 'OTHER'
+                      ? !!val || 'กรุณาเลือกจำนวนวันที่ต้องการขยาย'
+                      : true,
+                ]"
+              />
             </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"
-                        icon="mdi-delete-outline"
-                        @click="deleteDirector(props.row.id)"
-                      >
-                        <q-tooltip>ลบข้อมูล</q-tooltip>
-                      </q-btn>
-                    </q-td>
-                  </q-tr>
-                </template>
-              </Table>
-            </div>
-          </q-card>
-        </div>
 
-        <!-- <div class="col-12">
+            <div class="row">
+              <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"
+                >
+                  วันที่สืบสวน
+                  <q-checkbox
+                    v-if="
+                      props.data.investigationDateStart != null &&
+                      props.data.investigationDateEnd != null
+                    "
+                    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 && statusStep"
+                        v-model="formData.investigationDateStart"
+                        :locale="'th'"
+                        autoApply
+                        :enableTimePicker="false"
+                        week-start="0"
+                      >
+                        <template #year="{ year }">{{ year + 543 }}</template>
+                        <template #year-overlay-value="{ value }">{{
+                          parseInt(value + 543)
+                        }}</template>
+                        <template #trigger>
+                          <q-input
+                            for="#date"
+                            class="full-width cursor-pointer"
+                            ref="dateRef"
+                            :readonly="statusStep && isUpdate"
+                            outlined
+                            dense
+                            lazy-rules
+                            borderless
+                            hide-bottom-space
+                            :model-value="
+                              formData.investigationDateStart
+                                ? date2Thai(formData.investigationDateStart)
+                                : 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-select
+                        for="#daysExtend"
+                        outlined
+                        dense
+                        lazy-rules
+                        ref="daysExtendRef"
+                        v-model="formData.daysExtend"
+                        :options="investigateFactStore.daysExtendOp"
+                        label="จำนวนวันที่ต้องการขยาย"
+                        emit-value
+                        hide-bottom-space
+                        map-options
+                        :rules="[
+                          (val) =>
+                            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-select>
+                    </div>
+
+                    <div class="col-3">
+                      <datepicker
+                        menu-class-name="modalfix"
+                        v-model="formData.investigationDateEnd"
+                        :readonly="statusStep && isUpdate"
+                        :locale="'th'"
+                        autoApply
+                        :enableTimePicker="false"
+                        week-start="0"
+                      >
+                        <template #year="{ year }">{{ year + 543 }}</template>
+                        <template #year-overlay-value="{ value }">{{
+                          parseInt(value + 543)
+                        }}</template>
+                        <template #trigger>
+                          <q-input
+                            for="#dateEnd"
+                            ref="dateEndRef"
+                            class="full-width cursor-pointer"
+                            :readonly="statusStep && isUpdate"
+                            outlined
+                            dense
+                            lazy-rules
+                            hide-bottom-space
+                            borderless
+                            :model-value="
+                              formData.investigationDateEnd
+                                ? date2Thai(formData.investigationDateEnd)
+                                : 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>
+
+            <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"
+                    icon="mdi-plus"
+                    @click="onClickOpenPopup"
+                  >
+                    <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"
+                            icon="mdi-delete-outline"
+                            @click="deleteDirector(props.row.id)"
+                          >
+                            <q-tooltip>ลบข้อมูล</q-tooltip>
+                          </q-btn>
+                        </q-td>
+                      </q-tr>
+                    </template>
+                  </Table>
+                </div>
+              </q-card>
+            </div>
+
+            <!-- <div class="col-12">
           <q-input
             for="#complaintdetail"
             class="full-width cursor-pointer"
@@ -1030,7 +1044,7 @@ onMounted(async () => {
           />
         </div> -->
 
-        <!-- <div class="col-12">
+            <!-- <div class="col-12">
           <q-file
             for="#fileComplaint"
             outlined
@@ -1048,257 +1062,187 @@ onMounted(async () => {
           </q-file>
         </div> -->
 
-        <div class="col-12">
-          <q-input
-            for="#investigationDescription"
-            class="full-width cursor-pointer"
-            outlined
-            ref="investigationDescriptionRef"
-            dense
-            lazy-rules
-            borderless
-            v-model="formData.investigationDescription"
-            :rules="[(val) => !!val || `${'กรุณากรอกรายละเอียด'}`]"
-            hide-bottom-space
-            :label="`${'รายละเอียด'}`"
-            type="textarea"
-          />
-        </div>
-
-        <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 class="col-12">
+              <q-input
+                for="#investigationDescription"
+                class="full-width cursor-pointer"
+                outlined
+                ref="investigationDescriptionRef"
+                dense
+                lazy-rules
+                borderless
+                v-model="formData.investigationDescription"
+                :rules="[(val) => !!val || `${'กรุณากรอกรายละเอียด'}`]"
+                hide-bottom-space
+                :label="`${'รายละเอียด'}`"
+                type="textarea"
+              />
             </div>
 
-            <div class="col-12"><q-separator /></div>
+            <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-xs-12 q-pa-sm row">
-              <div class="row col-12 q-col-gutter-md">
-                <div class="col-3">
-                  <q-select
-                    for="#fault"
-                    outlined
-                    dense
-                    :readonly="statusStep"
-                    lazy-rules
-                    ref="investigationStatusResultRef"
-                    v-model="formData.investigationStatusResult"
-                    :rules="[(val) => !!val || `${'กรุณาเลือกผลการสืบสวน'}`]"
-                    :options="
-                      investigateFactStore.investigationStatusResultOptions
-                    "
-                    label="ผลการสืบสวน"
-                    emit-value
-                    map-options
-                    option-label="name"
-                    option-value="id"
-                    use-input
-                    @filter="(inputValue: any,
+                <div class="col-12"><q-separator /></div>
+
+                <div class="col-xs-12 q-pa-sm row">
+                  <div class="row col-12 q-col-gutter-md">
+                    <div class="col-3">
+                      <q-select
+                        for="#fault"
+                        outlined
+                        dense
+                        :readonly="statusStep"
+                        lazy-rules
+                        ref="investigationStatusResultRef"
+                        v-model="formData.investigationStatusResult"
+                        :rules="[
+                          (val) => !!val || `${'กรุณาเลือกผลการสืบสวน'}`,
+                        ]"
+                        :options="
+                          investigateFactStore.investigationStatusResultOptions
+                        "
+                        label="ผลการสืบสวน"
+                        emit-value
+                        map-options
+                        option-label="name"
+                        option-value="id"
+                        use-input
+                        @filter="(inputValue: any,
                 doneFn: Function) => filterFnOptionsType(inputValue, doneFn, 'faultOp'
                 )"
-                    ><template v-slot:no-option>
-                      <q-item>
-                        <q-item-section class="text-grey">
-                          ไม่มีข้อมูล
-                        </q-item-section>
-                      </q-item>
-                    </template>
-                  </q-select>
-                </div>
-
-                <div
-                  v-if="formData.investigationStatusResult == 'HAVE_CAUSE'"
-                  class="col-3"
-                >
-                  <q-select
-                    for="#fault"
-                    outlined
-                    dense
-                    ref="investigationCauseTextRef"
-                    v-model="formData.investigationCauseText"
-                    :rules="[
-                      (val) => !!val || `${'กรุณาเลือกร้ายแรง/ไม่ร้ายแรง'}`,
-                    ]"
-                    :options="
-                      investigateFactStore.investigationCauseTextOptions
-                    "
-                    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="resultRef"
-                  dense
-                  lazy-rules
-                  borderless
-                  v-model="formData.result"
-                  :rules="[(val) => !!val || `${'กรุณากรอกเหตุผล'}`]"
-                  hide-bottom-space
-                  :label="`${'เหตุผล'}`"
-                  type="textarea"
-                />
-              </div>
-            </div>
-
-            <div class="col-xs-12 q-pa-sm row">
-              <q-file
-                class="col-11"
-                for="#evidenceFiles"
-                outlined
-                dense
-                v-model="formData.evidenceFiles"
-                label="เอกสารที่เกี่ยวข้องกับการสืบสวน"
-                hide-bottom-space
-              >
-                <template v-slot:prepend>
-                  <q-icon name="attach_file" color="primary" />
-                </template>
-              </q-file>
-              <div class="col-1 self-center">
-                <q-btn
-                  v-if="formData.evidenceFiles"
-                  size="14px"
-                  flat
-                  round
-                  dense
-                  color="add"
-                  class="q-ml-sm"
-                  icon="mdi-upload"
-                  @click="uploadFileRelevant"
-                  ><q-tooltip>อัปโหลดเอกสาร</q-tooltip></q-btn
-                >
-              </div>
-              <div
-                class="col-12 q-mt-sm"
-                v-if="formData.disciplineInvestigateRelevantDocs && formData.disciplineInvestigateRelevantDocs.length === 0"
-              >
-                <q-card class="q-pa-md" bordered> ไม่มีรายการเอกสาร </q-card>
-              </div>
-              <q-list separator class="full-width q-mt-md">
-                <q-item
-                  clickable
-                  v-ripple
-                  v-for="(file, index) in props.data
-                    .disciplineInvestigateRelevantDocs"
-                  :key="index"
-                >
-                  <q-item-section>{{ file.fileName }}</q-item-section>
-                  <q-item-section avatar>
-                    <div class="row">
-                      <div>
-                        <q-btn
-                          dense
-                          flat
-                          round
-                          size="12px"
-                          color="blue"
-                          icon="mdi-download-outline"
-                          @click="downloadFileRelevant(file.pathName)"
-                        >
-                          <q-tooltip>ดาวน์โหลด</q-tooltip>
-                        </q-btn>
-                      </div>
-                      <div>
-                        <q-btn
-                          dense
-                          flat
-                          round
-                          size="12px"
-                          color="red"
-                          icon="mdi-delete-outline"
-                          @click="deleteFileRelevant(file.id)"
-                          ><q-tooltip>ลบเอกสารหลักฐาน</q-tooltip></q-btn
-                        >
-                      </div>
+                        ><template v-slot:no-option>
+                          <q-item>
+                            <q-item-section class="text-grey">
+                              ไม่มีข้อมูล
+                            </q-item-section>
+                          </q-item>
+                        </template>
+                      </q-select>
                     </div>
-                  </q-item-section>
-                </q-item>
-              </q-list>
+
+                    <div
+                      v-if="formData.investigationStatusResult == 'HAVE_CAUSE'"
+                      class="col-3"
+                    >
+                      <q-select
+                        for="#fault"
+                        outlined
+                        dense
+                        ref="investigationCauseTextRef"
+                        v-model="formData.investigationCauseText"
+                        :rules="[
+                          (val) => !!val || `${'กรุณาเลือกร้ายแรง/ไม่ร้ายแรง'}`,
+                        ]"
+                        :options="
+                          investigateFactStore.investigationCauseTextOptions
+                        "
+                        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="resultRef"
+                      dense
+                      lazy-rules
+                      borderless
+                      v-model="formData.result"
+                      :rules="[(val) => !!val || `${'กรุณากรอกเหตุผล'}`]"
+                      hide-bottom-space
+                      :label="`${'เหตุผล'}`"
+                      type="textarea"
+                    />
+                  </div>
+                </div>
+              </q-card>
             </div>
-          </q-card>
-        </div>
-      </div>
-
-      <q-separator />
-      <div class="row col-12 q-pa-sm">
-        <q-space />
-        <q-btn id="onSubmit" type="submit" label="บันทึก" color="secondary"
-          ><q-tooltip>บันทึก</q-tooltip></q-btn
-        >
-      </div>
-    </form>
-  </q-card>
-
-  <q-card flat class="q-pa-md q-mt-sm">
-    <div class="col-12 row q-col-gutter-md">
-      <div class="row col-12">
-        <q-card bordered class="row col-12" style="border: 1px solid #d6dee1">
-          <div class="col-12 text-weight-medium bg-grey-1 q-py-sm q-px-md">
-            อัปโหลดไฟล์เอกสารหลักฐาน
           </div>
-          <div class="col-12"><q-separator /></div>
-          <div class="col-xs-12 q-pa-sm row">
+
+          <q-separator />
+          <div class="row col-12 q-pa-sm">
+            <q-space />
+            <q-btn id="onSubmit" type="submit" label="บันทึก" color="secondary"
+              ><q-tooltip>บันทึก</q-tooltip></q-btn
+            >
+          </div>
+        </form>
+      </q-card>
+    </div>
+    <div class="col-xs-12 col-sm-12 col-md-3">
+      <q-card flat bordered class="q-pa-md q-mb-sm">
+        <div class="col-xs-12 q-mb-sm">
+          <q-card bordered class="row col-12" style="border: 1px solid #d6dee1">
+            <div class="col-12 text-weight-medium bg-grey-1 q-py-sm q-px-md">
+              อัปโหลดไฟล์เอกสารที่เกี่ยวข้องกับการสืบสวน
+            </div>
+            <div class="col-12"><q-separator /></div>
             <q-file
-            v-if="formData.status === 'NEW'"
-              class="col-11 q-mt-sm"
-              for="#documentFile"
+              class="col-10 q-pa-sm"
+              for="#evidenceFiles"
               outlined
               dense
-              v-model="formData.documentFile"
-              label="ไฟล์เอกสารหลักฐาน"
+              v-model="formData.evidenceFiles"
+              label="เอกสารที่เกี่ยวข้องกับการสืบสวน"
               hide-bottom-space
             >
               <template v-slot:prepend>
                 <q-icon name="attach_file" color="primary" />
               </template>
             </q-file>
-            <div class="col-1 self-center">
+            <div class="col-2 self-center">
               <q-btn
-                v-if="formData.documentFile"
+                v-if="formData.evidenceFiles"
                 size="14px"
                 flat
                 round
                 dense
                 color="add"
-                class="q-ml-sm q-mt-sm"
+                class="q-ml-sm"
                 icon="mdi-upload"
-                @click="uploadFile"
-                ><q-tooltip>อัปโหลดไฟล์</q-tooltip></q-btn
+                @click="uploadFileRelevant"
+                ><q-tooltip>อัปโหลดเอกสาร</q-tooltip></q-btn
               >
             </div>
             <div
-              v-if="formData.disciplineInvestigateDocs.length === 0"
-              class="col-12 q-mt-sm"
+              class="col-12"
+              v-if="
+                formData.disciplineInvestigateRelevantDocs &&
+                formData.disciplineInvestigateRelevantDocs.length === 0
+              "
             >
-              <q-card class="q-pa-md" bordered> ไม่มีรายการเอกสาร </q-card>
+              <q-card class="q-pa-md q-ma-xs" bordered> ไม่มีรายการเอกสาร </q-card>
             </div>
-          </div>
-          <div class="col-xs-12 q-pa-sm row">
-            <q-list separator class="full-width">
+            <q-list separator class="full-width q-mt-md" v-if="props.data.disciplineInvestigateRelevantDocs.length >0">
               <q-item
                 clickable
                 v-ripple
-                v-for="file in props.data.disciplineInvestigateDocs"
-                :key="file.id"
+                v-for="(file, index) in props.data
+                  .disciplineInvestigateRelevantDocs"
+                :key="index"
               >
                 <q-item-section>{{ file.fileName }}</q-item-section>
                 <q-item-section avatar>
@@ -1311,21 +1255,20 @@ onMounted(async () => {
                         size="12px"
                         color="blue"
                         icon="mdi-download-outline"
-                        @click="downloadFile(file.pathName)"
+                        @click="downloadFileRelevant(file.pathName)"
                       >
-                        <q-tooltip>ดาวน์โหลดเอกสารหลักฐาน</q-tooltip>
+                        <q-tooltip>ดาวน์โหลด</q-tooltip>
                       </q-btn>
                     </div>
                     <div>
                       <q-btn
-                        v-if="formData.status === 'NEW'"
                         dense
                         flat
                         round
                         size="12px"
                         color="red"
                         icon="mdi-delete-outline"
-                        @click="deleteFile(file.id)"
+                        @click="deleteFileRelevant(file.id)"
                         ><q-tooltip>ลบเอกสารหลักฐาน</q-tooltip></q-btn
                       >
                     </div>
@@ -1333,11 +1276,101 @@ onMounted(async () => {
                 </q-item-section>
               </q-item>
             </q-list>
-          </div>
-        </q-card>
-      </div>
+          </q-card>
+        </div>
+        <div class="col-xs-12">
+            <q-card
+              bordered
+              class="row col-12"
+              style="border: 1px solid #d6dee1"
+            >
+              <div class="col-12 text-weight-medium bg-grey-1 q-py-sm q-px-md">
+                อัปโหลดไฟล์เอกสารหลักฐาน
+              </div>
+              <div class="col-12"><q-separator /></div>  
+                <q-file
+                  v-if="formData.status === 'NEW'"
+                  class="col-10 q-pa-sm"
+                  for="#documentFile"
+                  outlined
+                  dense
+                  v-model="formData.documentFile"
+                  label="ไฟล์เอกสารหลักฐาน"
+                  hide-bottom-space
+                >
+                  <template v-slot:prepend>
+                    <q-icon name="attach_file" color="primary" />
+                  </template>
+                </q-file>
+                
+                <div class="col-2 self-center">
+                  <q-btn
+                    v-if="formData.documentFile"
+                    size="14px"
+                    flat
+                    round
+                    dense
+                    color="add"
+                    icon="mdi-upload"
+                    @click="uploadFile"
+                    ><q-tooltip>อัปโหลดไฟล์</q-tooltip></q-btn
+                  >
+                </div>
+                <div
+                  v-if="formData.disciplineInvestigateDocs.length === 0"
+                  class="col-12"
+                >
+                  <q-card class="q-pa-md q-ma-xs" bordered> ไม่มีรายการเอกสาร </q-card>
+                </div>
+
+              <div class="col-xs-12 q-pa-sm row" v-if="props.data.disciplineInvestigateDocs.length >0">
+                <q-list separator class="full-width">
+                  <q-item
+                    clickable
+                    v-ripple
+                    v-for="file in props.data.disciplineInvestigateDocs"
+                    :key="file.id"
+                  >
+                    <q-item-section>{{ file.fileName }}</q-item-section>
+                    <q-item-section avatar>
+                      <div class="row">
+                        <div>
+                          <q-btn
+                            dense
+                            flat
+                            round
+                            size="12px"
+                            color="blue"
+                            icon="mdi-download-outline"
+                            @click="downloadFile(file.pathName)"
+                          >
+                            <q-tooltip>ดาวน์โหลดเอกสารหลักฐาน</q-tooltip>
+                          </q-btn>
+                        </div>
+                        <div>
+                          <q-btn
+                            v-if="formData.status === 'NEW'"
+                            dense
+                            flat
+                            round
+                            size="12px"
+                            color="red"
+                            icon="mdi-delete-outline"
+                            @click="deleteFile(file.id)"
+                            ><q-tooltip>ลบเอกสารหลักฐาน</q-tooltip></q-btn
+                          >
+                        </div>
+                      </div>
+                    </q-item-section>
+                  </q-item>
+                </q-list>
+              </div>
+            </q-card>
+      
+        </div>
+      </q-card>
     </div>
-  </q-card>
+  </div>
 
   <DialogAddPersonal
     title="ผู้ถูกร้องเรียน"