From f96c65f1b9f431a4d89381332c1ddd1607d9f488 Mon Sep 17 00:00:00 2001
From: waruneeta <warunee.auy@gmail.com>
Date: Tue, 28 Nov 2023 17:29:55 +0700
Subject: [PATCH] =?UTF-8?q?=E0=B9=81=E0=B8=81=E0=B9=89=20layout=20?=
 =?UTF-8?q?=E0=B8=8B=E0=B9=89=E0=B8=B2=E0=B8=A2=20=E0=B8=82=E0=B8=A7?=
 =?UTF-8?q?=E0=B8=B2=20=E0=B8=9F=E0=B8=AD=E0=B8=A3=E0=B9=8C=E0=B8=A1?=
 =?UTF-8?q?=E0=B9=80=E0=B8=A3=E0=B8=B7=E0=B9=88=E0=B8=AD=E0=B8=87=E0=B8=A3?=
 =?UTF-8?q?=E0=B9=89=E0=B8=AD=E0=B8=87=E0=B9=80=E0=B8=A3=E0=B8=B5=E0=B8=A2?=
 =?UTF-8?q?=E0=B8=99?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/1_Complaint/Form.vue           | 1128 +++++++++--------
 .../11_discipline/components/UploadFile.vue   |   12 +-
 2 files changed, 600 insertions(+), 540 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..6c12f6979 100644
--- a/src/modules/11_discipline/components/1_Complaint/Form.vue
+++ b/src/modules/11_discipline/components/1_Complaint/Form.vue
@@ -444,493 +444,540 @@ onMounted(() => {
 });
 </script>
 <template>
-  <div class="col-12 q-mt-sm">
-    <q-card flat bordered>
+  <div class="row col-12 bg-white">
+    <div class="col-sm-12 col-md-9">
       <form @submit.prevent="validateForm">
-        <div class="col-12 row q-pa-md">
-          <div class="col-xs-12 col-sm-12 row q-col-gutter-md">
-            <div class="col-xs-12 col-sm-3" id="respondentType">
-              <q-select
-                for="SelectrespondentType"
-                v-model="formData.respondentType"
-                ref="respondentTypeRef"
-                dense
-                outlined
-                :readonly="formData.status !== 'NEW' && formData.status !== ''"
-                label="ผู้ถูกร้องเรียน"
-                option-value="id"
-                option-label="name"
-                emit-value
-                use-input
-                map-options
-                hide-bottom-space
-                :options="complainstStore.complainantoptions"
-                :rules="[(val) => !!val || `${'กรุณาเลือกผู้ร้องเรียน'}`]"
-                lazy-rules
-                @filter="(inputValue: any,
+        <div class="col-12">
+          <q-card bordered>
+            <div class="col-12 row q-pa-md">
+              <div class="col-xs-12 col-sm-12 row q-col-gutter-md">
+                <div class="col-xs-12 col-sm-3" id="respondentType">
+                  <q-select
+                    for="SelectrespondentType"
+                    v-model="formData.respondentType"
+                    ref="respondentTypeRef"
+                    dense
+                    outlined
+                    :readonly="
+                      formData.status !== 'NEW' && formData.status !== ''
+                    "
+                    label="ผู้ถูกร้องเรียน"
+                    option-value="id"
+                    option-label="name"
+                    emit-value
+                    use-input
+                    map-options
+                    hide-bottom-space
+                    :options="complainstStore.complainantoptions"
+                    :rules="[(val) => !!val || `${'กรุณาเลือกผู้ร้องเรียน'}`]"
+                    lazy-rules
+                    @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>
+                  >
+                    <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' && formData.status !== ''"
-                outlined
-                option-label="name"
-                option-value="id"
-                emit-value
-                map-options
-                v-model="formData.organizationId"
-                :options="complainstStore.organizationIdOp"
-                label="เลือกสำนักงาน"
-                :rules="[(val) => !!val || `${'กรุณาเลือกสำนักงาน'}`]"
-                lazy-rules
-              />
-            </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' && formData.status !== ''
+                    "
+                    outlined
+                    option-label="name"
+                    option-value="id"
+                    emit-value
+                    map-options
+                    v-model="formData.organizationId"
+                    :options="complainstStore.organizationIdOp"
+                    label="เลือกสำนักงาน"
+                    :rules="[(val) => !!val || `${'กรุณาเลือกสำนักงาน'}`]"
+                    lazy-rules
+                  />
+                </div>
 
-            <div class="col-xs-12 col-sm-3" id="consideredAgency">
-              <q-select
-                ref="consideredAgencyRef"
-                for="selectAgency"
-                dense
-                outlined
-                v-model="formData.consideredAgency"
-                :options="complainstStore.consideredAgencytoptions"
-                label="หน่วยงานที่พิจารณา"
-                option-value="id"
-                option-label="name"
-                :readonly="formData.status !== 'NEW' && formData.status !== ''"
-                hide-bottom-space
-                emit-value
-                map-options
-                :rules="[(val) => !!val || `${'กรุณาเลือกหน่วยงาน'}`]"
-                lazy-rules
-                use-input
-                @filter="(inputValue: any,
+                <div class="col-xs-12 col-sm-3" id="consideredAgency">
+                  <q-select
+                    ref="consideredAgencyRef"
+                    for="selectAgency"
+                    dense
+                    outlined
+                    v-model="formData.consideredAgency"
+                    :options="complainstStore.consideredAgencytoptions"
+                    label="หน่วยงานที่พิจารณา"
+                    option-value="id"
+                    option-label="name"
+                    :readonly="
+                      formData.status !== 'NEW' && formData.status !== ''
+                    "
+                    hide-bottom-space
+                    emit-value
+                    map-options
+                    :rules="[(val) => !!val || `${'กรุณาเลือกหน่วยงาน'}`]"
+                    lazy-rules
+                    use-input
+                    @filter="(inputValue: any,
                 doneFn: Function) => filterSelector(inputValue, doneFn, 'filterconsideredAgencytoptions'
                 )"
-              >
-                <template v-slot:no-option>
-                  <q-item>
-                    <q-item-section class="text-grey">
-                      ไม่มีข้อมูล
-                    </q-item-section>
-                  </q-item>
-                </template>
-              </q-select>
-            </div>
-            <div class="row col-12" v-if="formData.respondentType === 'PERSON'">
-              <q-card
-                bordered
-                class="row col-12"
-                style="border: 1px solid #d6dee1"
-              >
+                  >
+                    <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-12 text-weight-medium bg-grey-1 q-py-xs q-px-md"
+                  class="row col-12"
+                  v-if="formData.respondentType === 'PERSON'"
                 >
-                  ผู้ถูกร้องเรียน
-                  <q-btn
-                    v-if="formData.status === 'NEW' || formData.status === ''"
-                    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="complainstStore.columns"
-                    :rows="complainstStore.rowsAdd"
-                    row-key="idcard"
-                    flat
+                  <q-card
                     bordered
-                    :paging="true"
-                    dense
-                    class="custom-header-table"
-                    :visible-columns="complainstStore.visibleColumns"
+                    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 v-else-if="col.name == 'info'">
-                            <router-link :to="`/registry/${props.row.personId}`"
-                              ><q-icon name="info" color="info" size="sm"
-                                ><q-tooltip>ดูข้อมูลในทะเบียนประวัติ</q-tooltip>
-                              </q-icon></router-link
+                    <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' || formData.status === ''
+                        "
+                        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="complainstStore.columns"
+                        :rows="complainstStore.rowsAdd"
+                        row-key="idcard"
+                        flat
+                        bordered
+                        :paging="true"
+                        dense
+                        class="custom-header-table"
+                        :visible-columns="complainstStore.visibleColumns"
+                      >
+                        <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"
                             >
-                            {{ col.value }}
-                          </div>
-                          <div
-                            v-else-if="col.name === 'organization'"
-                            class="table_ellipsis"
-                          >
-                            {{ props.row.organization }}
-                          </div>
-                          <div v-else>
-                            {{ col.value }}
-                          </div>
-                        </q-td>
-                        <q-td auto-width>
-                          <q-btn
-                            v-if="
-                              formData.status === 'NEW' ||
-                              formData.status === ''
-                            "
-                            size="12px"
-                            flat
-                            round
-                            dense
-                            color="red"
-                            class="q-ml-sm"
-                            icon="mdi-delete-outline"
-                            @click="deletePerson(props.row.personId)"
-                            ><q-tooltip>ลบผู้ถูกร้องเรียน</q-tooltip></q-btn
-                          >
-                        </q-td>
-                      </q-tr>
-                    </template>
-                  </d-table>
+                              <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 v-else-if="col.name == 'info'">
+                                <router-link
+                                  :to="`/registry/${props.row.personId}`"
+                                  ><q-icon name="info" color="info" size="sm"
+                                    ><q-tooltip
+                                      >ดูข้อมูลในทะเบียนประวัติ</q-tooltip
+                                    >
+                                  </q-icon></router-link
+                                >
+                                {{ col.value }}
+                              </div>
+                              <div
+                                v-else-if="col.name === 'organization'"
+                                class="table_ellipsis"
+                              >
+                                {{ props.row.organization }}
+                              </div>
+                              <div v-else>
+                                {{ col.value }}
+                              </div>
+                            </q-td>
+                            <q-td auto-width>
+                              <q-btn
+                                v-if="
+                                  formData.status === 'NEW' ||
+                                  formData.status === ''
+                                "
+                                size="12px"
+                                flat
+                                round
+                                dense
+                                color="red"
+                                class="q-ml-sm"
+                                icon="mdi-delete-outline"
+                                @click="deletePerson(props.row.personId)"
+                                ><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-12" id="title">
-              <q-input
-                for="inputTopicComplaint"
-                ref="titleRef"
-                dense
-                outlined
-                :readonly="formData.status !== 'NEW' && formData.status !== ''"
-                hide-bottom-space
-                v-model="formData.title"
-                :rules="[(val) => !!val || 'กรุณาการข้อมูล']"
-                lazy-rules
-                label="เรื่องร้องเรียน"
-                type="textarea"
-                rows="5"
-              />
-            </div>
-
-            <div class="col-xs-12 col-sm-12" id="description">
-              <q-input
-                for="inputDetail"
-                ref="descriptionRef"
-                dense
-                outlined
-                :readonly="formData.status !== 'NEW' && formData.status !== ''"
-                hide-bottom-space
-                v-model="formData.description"
-                :rules="[(val) => !!val || 'กรุณาการข้อมูล']"
-                lazy-rules
-                label="รายละเอียดเรื่องร้องเรียน"
-                type="textarea"
-                rows="5"
-              />
-            </div>
-
-            <div class="col-xs-12 col-sm-3" id="dateReceived">
-              <datepicker
-                menu-class-name="modalfix"
-                v-model="formData.dateReceived"
-                :locale="'th'"
-                autoApply
-                borderless
-                :readonly="formData.status !== 'NEW' && formData.status !== ''"
-                :enableTimePicker="false"
-                week-start="0"
-              >
-                <template #year="{ year }">
-                  {{ year + 543 }}
-                </template>
-                <template #year-overlay-value="{ value }">
-                  {{ parseInt(value + 543) }}
-                </template>
-                <template #trigger>
+                <div class="col-xs-12 col-sm-12" id="title">
                   <q-input
-                    for="inputDatereceive"
-                    ref="dateReceivedRef"
-                    outlined
+                    for="inputTopicComplaint"
+                    ref="titleRef"
                     dense
+                    outlined
                     :readonly="
                       formData.status !== 'NEW' && formData.status !== ''
                     "
                     hide-bottom-space
-                    class="full-width datepicker"
-                    :model-value="
-                      formData.dateReceived != null
-                        ? date2Thai(formData.dateReceived)
-                        : null
-                    "
-                    label="วันที่รับเรื่อง"
-                    :rules="[
-                      (val) => !!val || `${'กรุณาเลือกวันที่รับเรื่อง'}`,
-                    ]"
+                    v-model="formData.title"
+                    :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>
+                    label="เรื่องร้องเรียน"
+                    type="textarea"
+                    rows="5"
+                  />
+                </div>
 
-            <div class="col-xs-12 col-sm-3" id="levelConsideration">
-              <q-select
-                for="selectConsiderationLevel"
-                ref="levelConsiderationRef"
-                dense
-                outlined
-                :readonly="formData.status !== 'NEW' && formData.status !== ''"
-                v-model="formData.levelConsideration"
-                :options="levelConsiderationtoptions"
-                label="ระดับการพิจารณา"
-                option-value="id"
-                option-label="name"
-                emit-value
-                hide-bottom-space
-                map-options
-                :rules="[(val) => !!val || `${'กรุณาเลือกระดับการพิจารณา'}`]"
-                lazy-rules
-                @update:model-value="selectLevel(formData.levelConsideration)"
-              />
-            </div>
-
-            <div class="col-xs-12 col-sm-3" id="dateConsideration">
-              <datepicker
-                menu-class-name="modalfix"
-                v-model="formData.dateConsideration"
-                @update:model-value="selectLevel(formData.levelConsideration)"
-                :locale="'th'"
-                :readonly="formData.status !== 'NEW' && formData.status !== ''"
-                autoApply
-                borderless
-                :enableTimePicker="false"
-                week-start="0"
-              >
-                <template #year="{ year }">
-                  {{ year + 543 }}
-                </template>
-                <template #year-overlay-value="{ value }">
-                  {{ parseInt(value + 543) }}
-                </template>
-                <template #trigger>
+                <div class="col-xs-12 col-sm-12" id="description">
                   <q-input
-                    for="inputDateconsideration"
-                    ref="dateConsiderationRef"
-                    outlined
+                    for="inputDetail"
+                    ref="descriptionRef"
                     dense
-                    class="full-width datepicker"
-                    :model-value="
-                      formData.dateConsideration != null
-                        ? date2Thai(formData.dateConsideration)
-                        : null
-                    "
-                    :readonly="
-                      formData.status !== 'NEW' && formData.status !== ''
-                    "
-                    label="วันที่กำหนดวันพิจารณา"
-                    hide-bottom-space
-                    :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>
-
-            <div class="col-xs-12 col-sm-3" id="offenseDetails">
-              <q-select
-                for="selectOffenseDescription"
-                ref="offenseDetailsRef"
-                dense
-                outlined
-                :readonly="formData.status !== 'NEW' && formData.status !== ''"
-                v-model="formData.offenseDetails"
-                :options="offenseDetailstoptions"
-                label="ลักษณะความผิด"
-                option-value="id"
-                option-label="name"
-                emit-value
-                hide-bottom-space
-                map-options
-                :rules="[(val) => !!val || `${'กรุณาเลือกลักษณะความผิด'}`]"
-                lazy-rules
-              />
-            </div>
-
-            <div class="col-xs-12 col-sm-3" id="dateNotification">
-              <datepicker
-                menu-class-name="modalfix"
-                v-model="formData.dateNotification"
-                :locale="'th'"
-                autoApply
-                :readonly="formData.status !== 'NEW' && formData.status !== ''"
-                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
-                    for="inputDatewarn"
-                    ref="dateNotificationRef"
                     outlined
-                    dense
                     :readonly="
                       formData.status !== 'NEW' && formData.status !== ''
                     "
                     hide-bottom-space
-                    class="full-width datepicker"
-                    :model-value="
-                      formData.dateNotification != null
-                        ? date2Thai(formData.dateNotification)
-                        : null
+                    v-model="formData.description"
+                    :rules="[(val) => !!val || 'กรุณาการข้อมูล']"
+                    lazy-rules
+                    label="รายละเอียดเรื่องร้องเรียน"
+                    type="textarea"
+                    rows="5"
+                  />
+                </div>
+
+                <div class="col-xs-12 col-sm-3" id="dateReceived">
+                  <datepicker
+                    menu-class-name="modalfix"
+                    v-model="formData.dateReceived"
+                    :locale="'th'"
+                    autoApply
+                    borderless
+                    :readonly="
+                      formData.status !== 'NEW' && formData.status !== ''
                     "
-                    label="วันที่แจ้งเตือนล่วงหน้า"
+                    :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="inputDatereceive"
+                        ref="dateReceivedRef"
+                        outlined
+                        dense
+                        :readonly="
+                          formData.status !== 'NEW' && formData.status !== ''
+                        "
+                        hide-bottom-space
+                        class="full-width datepicker"
+                        :model-value="
+                          formData.dateReceived != null
+                            ? date2Thai(formData.dateReceived)
+                            : 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>
+
+                <div class="col-xs-12 col-sm-3" id="levelConsideration">
+                  <q-select
+                    for="selectConsiderationLevel"
+                    ref="levelConsiderationRef"
+                    dense
+                    outlined
+                    :readonly="
+                      formData.status !== 'NEW' && formData.status !== ''
+                    "
+                    v-model="formData.levelConsideration"
+                    :options="levelConsiderationtoptions"
+                    label="ระดับการพิจารณา"
+                    option-value="id"
+                    option-label="name"
+                    emit-value
+                    hide-bottom-space
+                    map-options
                     :rules="[
-                      (val) =>
-                        !!val || `${'กรุณาเลือกวันที่แจ้งเตือนล่วงหน้า'}`,
+                      (val) => !!val || `${'กรุณาเลือกระดับการพิจารณา'}`,
                     ]"
                     lazy-rules
+                    @update:model-value="
+                      selectLevel(formData.levelConsideration)
+                    "
+                  />
+                </div>
+
+                <div class="col-xs-12 col-sm-3" id="dateConsideration">
+                  <datepicker
+                    menu-class-name="modalfix"
+                    v-model="formData.dateConsideration"
+                    @update:model-value="
+                      selectLevel(formData.levelConsideration)
+                    "
+                    :locale="'th'"
+                    :readonly="
+                      formData.status !== 'NEW' && formData.status !== ''
+                    "
+                    autoApply
+                    borderless
+                    :enableTimePicker="false"
+                    week-start="0"
                   >
-                    <template v-slot:prepend>
-                      <q-icon
-                        name="event"
-                        class="cursor-pointer"
-                        style="color: var(--q-primary)"
-                      >
-                      </q-icon>
+                    <template #year="{ year }">
+                      {{ year + 543 }}
                     </template>
-                  </q-input>
-                </template>
-              </datepicker>
-            </div>
+                    <template #year-overlay-value="{ value }">
+                      {{ parseInt(value + 543) }}
+                    </template>
+                    <template #trigger>
+                      <q-input
+                        for="inputDateconsideration"
+                        ref="dateConsiderationRef"
+                        outlined
+                        dense
+                        class="full-width datepicker"
+                        :model-value="
+                          formData.dateConsideration != null
+                            ? date2Thai(formData.dateConsideration)
+                            : null
+                        "
+                        :readonly="
+                          formData.status !== 'NEW' && formData.status !== ''
+                        "
+                        label="วันที่กำหนดวันพิจารณา"
+                        hide-bottom-space
+                        :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>
 
-            <div class="col-xs-12 col-sm-3" id="complaintFrom">
-              <q-select
-                for="selectReceivecomplaints"
-                ref="complaintFromRef"
-                dense
-                :readonly="formData.status !== 'NEW' && formData.status !== ''"
-                outlined
-                v-model="formData.complaintFrom"
-                :options="complaintFromtoptions"
-                label="รับเรื่องร้องเรียน"
-                option-value="id"
-                option-label="name"
-                hide-bottom-space
-                emit-value
-                map-options
-                :rules="[(val) => !!val || `${'กรุณาเลือกรับเรื่องร้องเรียน'}`]"
-                lazy-rules
-              />
-            </div>
+                <div class="col-xs-12 col-sm-3" id="offenseDetails">
+                  <q-select
+                    for="selectOffenseDescription"
+                    ref="offenseDetailsRef"
+                    dense
+                    outlined
+                    :readonly="
+                      formData.status !== 'NEW' && formData.status !== ''
+                    "
+                    v-model="formData.offenseDetails"
+                    :options="offenseDetailstoptions"
+                    label="ลักษณะความผิด"
+                    option-value="id"
+                    option-label="name"
+                    emit-value
+                    hide-bottom-space
+                    map-options
+                    :rules="[(val) => !!val || `${'กรุณาเลือกลักษณะความผิด'}`]"
+                    lazy-rules
+                  />
+                </div>
 
-            <div class="col-xs-12 col-sm-12" id="appellant">
-              <q-input
-                for="inputPetitioner"
-                ref="appellantRef"
-                dense
-                outlined
-                v-model="formData.appellant"
-                :readonly="formData.status !== 'NEW' && formData.status !== ''"
-                label="ผู้ร้องเรียน"
-                :rules="[(val) => !!val || `${'กรุณากรอกข้อมูล'}`]"
-                lazy-rules
-                hide-bottom-space
-                type="textarea"
-                rows="5"
-              />
+                <div class="col-xs-12 col-sm-3" id="dateNotification">
+                  <datepicker
+                    menu-class-name="modalfix"
+                    v-model="formData.dateNotification"
+                    :locale="'th'"
+                    autoApply
+                    :readonly="
+                      formData.status !== 'NEW' && formData.status !== ''
+                    "
+                    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
+                        for="inputDatewarn"
+                        ref="dateNotificationRef"
+                        outlined
+                        dense
+                        :readonly="
+                          formData.status !== 'NEW' && formData.status !== ''
+                        "
+                        hide-bottom-space
+                        class="full-width datepicker"
+                        :model-value="
+                          formData.dateNotification != null
+                            ? date2Thai(formData.dateNotification)
+                            : 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>
+
+                <div class="col-xs-12 col-sm-3" id="complaintFrom">
+                  <q-select
+                    for="selectReceivecomplaints"
+                    ref="complaintFromRef"
+                    dense
+                    :readonly="
+                      formData.status !== 'NEW' && formData.status !== ''
+                    "
+                    outlined
+                    v-model="formData.complaintFrom"
+                    :options="complaintFromtoptions"
+                    label="รับเรื่องร้องเรียน"
+                    option-value="id"
+                    option-label="name"
+                    hide-bottom-space
+                    emit-value
+                    map-options
+                    :rules="[
+                      (val) => !!val || `${'กรุณาเลือกรับเรื่องร้องเรียน'}`,
+                    ]"
+                    lazy-rules
+                  />
+                </div>
+
+                <div class="col-xs-12 col-sm-12" id="appellant">
+                  <q-input
+                    for="inputPetitioner"
+                    ref="appellantRef"
+                    dense
+                    outlined
+                    v-model="formData.appellant"
+                    :readonly="
+                      formData.status !== 'NEW' && formData.status !== ''
+                    "
+                    label="ผู้ร้องเรียน"
+                    :rules="[(val) => !!val || `${'กรุณากรอกข้อมูล'}`]"
+                    lazy-rules
+                    hide-bottom-space
+                    type="textarea"
+                    rows="5"
+                  />
+                </div>
+                <div class="col-xs-12 col-sm-12">
+                  <q-input
+                    :readonly="
+                      formData.status !== 'NEW' && formData.status !== ''
+                    "
+                    for="result"
+                    ref="resultRef"
+                    dense
+                    outlined
+                    hide-bottom-space
+                    v-model="formData.result"
+                    :rules="[
+                      (val) => !!val || 'กรุณากรอกผลการตรวจสอบเรื่องร้องเรียน',
+                    ]"
+                    lazy-rules
+                    label="ผลการตรวจสอบเรื่องร้องเรียน"
+                    type="textarea"
+                    rows="5"
+                  />
+                </div>
+              </div>
             </div>
-            <div class="col-xs-12 col-sm-12">
-              <q-input
-                for="result"
-                ref="resultRef"
-                dense
-                outlined
-                hide-bottom-space
-                v-model="formData.result"
-                :rules="[
-                  (val) => !!val || 'กรุณากรอกผลการตรวจสอบเรื่องร้องเรียน',
-                ]"
-                lazy-rules
-                label="ผลการตรวจสอบเรื่องร้องเรียน"
-                type="textarea"
-                rows="5"
-              />
-            </div>
-          </div>
+          </q-card>
         </div>
+
         <q-separator />
         <div
           class="row col-12 q-pa-sm"
@@ -947,90 +994,107 @@ onMounted(() => {
           >
         </div>
       </form>
-    </q-card>
-  </div>
-  <div class="col-12 q-mt-sm q-mb-lg" v-if="props.data">
-    <q-card flat bordered>
-      <div class="col-12 text-weight-medium bg-grey-1 q-py-sm q-px-md">
-        {{
-          formData.status === "NEW"
-            ? "อัปโหลดไฟล์เอกสารหลักฐาน"
-            : "ไฟล์เอกสารหลักฐาน"
-        }}
-      </div>
-      <div class="col-12"><q-separator /></div>
-      <div
-        class="col-xs-12 q-px-md q-py-sm row"
-        v-if="formData.status === 'NEW'"
-      >
-        <div class="col-11" id="documentFile">
-          <q-file
-            for="inputFiles"
-            outlined
-            dense
-            class="fit"
-            :readonly="formData.status !== 'NEW' && formData.status !== ''"
-            v-model="formData.documentFile"
-            @added="fileUploadDoc"
-            label="ไฟล์เอกสารหลักฐาน"
-            hide-bottom-space
-            lazy-rules
-            accept=".pdf,.xlsx,.doc"
-            clearable
-          >
-            <template v-slot:prepend>
-              <q-icon name="attach_file" color="primary" />
-            </template>
-          </q-file>
-        </div>
-        <div class="col-1 self-center" v-if="formData.documentFile">
-          <q-btn
-            size="14px"
-            flat
-            round
-            dense
-            color="add"
-            class="q-ml-sm"
-            icon="mdi-upload"
-            @click="upLoadFileDoc()"
-            ><q-tooltip>อัปโหลดไฟล์</q-tooltip></q-btn
-          >
-        </div>
-      </div>
-      <div class="q-px-md q-py-sm" v-if="fileList.length > 0">
-        <q-list bordered separator v-for="data in fileList" :key="data.id">
-          <q-item clickable v-ripple class="items-center">
-            <q-item-section>{{ data.fileName }}</q-item-section>
-            <q-space />
-            <q-btn
-              size="12px"
-              flat
-              round
-              dense
-              color="blue"
-              icon="mdi-download"
-              @click="downloadFile(data.pathName)"
-              ><q-tooltip>ดาวน์โหลดไฟล์</q-tooltip></q-btn
+    </div>
+    <!-- อัพโหลดไฟล์ -->
+    <div class="col-sm-12 col-md-3">
+      <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"
             >
-            <q-btn
-              v-if="formData.status === 'NEW'"
-              size="12px"
-              flat
-              round
-              dense
-              color="red"
-              class="q-ml-sm"
-              icon="mdi-delete-outline"
-              @click="deleteFile(data.id)"
-              ><q-tooltip>ลบไฟล์</q-tooltip></q-btn
-            >
-          </q-item>
-        </q-list>
-      </div>
-      <div class="q-px-md q-py-sm" v-if="fileList.length === 0">
-        <q-card class="q-pa-md" bordered> ไม่มีรายการเอกสาร </q-card>
-      </div>
-    </q-card>
+              <div class="col-12 text-weight-medium bg-grey-1 q-py-sm q-px-md">
+                {{
+                  formData.status === "NEW"
+                    ? "อัปโหลดไฟล์เอกสารหลักฐาน"
+                    : "ไฟล์เอกสารหลักฐาน"
+                }}
+              </div>
+              <div class="col-12"><q-separator /></div>
+
+              <div v-if="formData.status === 'NEW'" class="col-12 q-pa-sm row">
+                <q-file
+                  for="inputFiles"
+                  class="col-11"
+                  outlined
+                  dense
+                  :readonly="
+                    formData.status !== 'NEW' && formData.status !== ''
+                  "
+                  v-model="formData.documentFile"
+                  @added="fileUploadDoc"
+                  label="ไฟล์เอกสารหลักฐาน"
+                  hide-bottom-space
+                  lazy-rules
+                  accept=".pdf,.xlsx,.doc"
+                  clearable
+                >
+                  <template v-slot:prepend>
+                    <q-icon name="attach_file" color="primary" />
+                  </template>
+                </q-file>
+
+                <div class="col-1 self-center" v-if="formData.documentFile">
+                  <q-btn
+                    size="14px"
+                    flat
+                    round
+                    dense
+                    color="add"
+                    icon="mdi-upload"
+                    @click="upLoadFileDoc()"
+                    ><q-tooltip>อัปโหลดไฟล์</q-tooltip></q-btn
+                  >
+                </div>
+              </div>
+
+              <div v-if="fileList.length > 0" class="col-xs-12 q-pa-sm row">
+                <q-list
+                  v-for="data in fileList"
+                  :key="data.id"
+                  class="full-width"
+                  bordered
+                  separator
+                >
+                  <q-item clickable v-ripple>
+                    <q-item-section>{{ data.fileName }}</q-item-section>
+                    <q-space />
+                    <q-btn
+                      size="12px"
+                      flat
+                      round
+                      dense
+                      color="blue"
+                      icon="mdi-download"
+                      @click="downloadFile(data.pathName)"
+                      ><q-tooltip>ดาวน์โหลดไฟล์</q-tooltip></q-btn
+                    >
+                    <q-btn
+                      v-if="formData.status === 'NEW'"
+                      size="12px"
+                      flat
+                      round
+                      dense
+                      color="red"
+                      class="q-ml-sm"
+                      icon="mdi-delete-outline"
+                      @click="deleteFile(data.id)"
+                      ><q-tooltip>ลบไฟล์</q-tooltip></q-btn
+                    >
+                  </q-item>
+                </q-list>
+              </div>
+
+              <div class="col-12 q-mt-sm" v-if="fileList.length == 0">
+                <q-card class="q-pa-md" bordered> ไม่มีรายการเอกสาร </q-card>
+              </div>
+            </q-card>
+          </div>
+        </div>
+      </q-card>
+    </div>
   </div>
 
   <DialogAddPersonal
diff --git a/src/modules/11_discipline/components/UploadFile.vue b/src/modules/11_discipline/components/UploadFile.vue
index f30038f8a..2423f2626 100644
--- a/src/modules/11_discipline/components/UploadFile.vue
+++ b/src/modules/11_discipline/components/UploadFile.vue
@@ -137,19 +137,15 @@ function downloadFile(link: string) {
             </div>
           </div>
 
-          <div class="col-xs-12 q-pa-sm row" v-if="props.files.length > 0">
+          <div v-if="props.files.length > 0" class="col-xs-12 q-pa-sm row">
             <q-list
-              v-if="props.files.length > 0"
+              v-for="(f, index) in props.files"
+              :key="index"
               bordered
               separator
               class="full-width"
             >
-              <q-item
-                v-for="(f, index) in props.files"
-                :key="index"
-                clickable
-                v-ripple
-              >
+              <q-item clickable v-ripple>
                 <q-item-section>{{ f.fileName }}</q-item-section>
                 <q-item-section avatar>
                   <div class="row">