From 960f996ebc2ae6d4496a38835e207405f7d5c2ea Mon Sep 17 00:00:00 2001
From: Tanyalak <tanyalak@frappet.com>
Date: Tue, 7 Nov 2023 12:13:42 +0700
Subject: [PATCH] =?UTF-8?q?=E0=B8=9B=E0=B8=A3=E0=B8=B1=E0=B8=9A=20Layout?=
 =?UTF-8?q?=20=E0=B8=AA=E0=B8=B7=E0=B8=9A=E0=B8=AA=E0=B8=A7=E0=B8=99?=
 =?UTF-8?q?=E0=B8=82=E0=B9=89=E0=B8=AD=E0=B9=80=E0=B8=97=E0=B9=87=E0=B8=88?=
 =?UTF-8?q?=E0=B8=88=E0=B8=A3=E0=B8=B4=E0=B8=87,=E0=B8=AA=E0=B8=AD?=
 =?UTF-8?q?=E0=B8=9A=E0=B8=AA=E0=B8=A7=E0=B8=99=E0=B8=84=E0=B8=A7=E0=B8=B2?=
 =?UTF-8?q?=E0=B8=A1=E0=B8=9C=E0=B8=B4=E0=B8=94=E0=B8=97=E0=B8=B2=E0=B8=87?=
 =?UTF-8?q?=E0=B8=A7=E0=B8=B4=E0=B8=99=E0=B8=B1=E0=B8=A2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/2_InvestigateFacts/Form.vue    | 654 +++++++++---------
 .../3_InvestigateDisciplinary/Dialogbody.vue  |  65 +-
 .../3_InvestigateDisciplinary/Form.vue        | 345 +++++----
 .../6_BasicInformation/Director/Form.vue      |   4 +
 .../11_discipline/interface/index/Main.ts     |   1 +
 .../interface/request/director.ts             |   2 +
 .../store/InvestigateDisStore.ts              |  11 +
 7 files changed, 577 insertions(+), 505 deletions(-)

diff --git a/src/modules/11_discipline/components/2_InvestigateFacts/Form.vue b/src/modules/11_discipline/components/2_InvestigateFacts/Form.vue
index e45ff916e..2bdc487aa 100644
--- a/src/modules/11_discipline/components/2_InvestigateFacts/Form.vue
+++ b/src/modules/11_discipline/components/2_InvestigateFacts/Form.vue
@@ -117,341 +117,340 @@ watch(props.data, async () => {
 </script>
 <template>
   <q-card flat bordered class="col-12 q-mt-sm">
-    <div class="q-pa-md">
       <form @submit.prevent="validateForm">
-        <div class="row col-12">
-          <div class="col-12 row bg-white q-col-gutter-md">
-            <div class="col-xs-12 row items-center">
-              <div class="col-12">
-                <q-input
-                  for="#complaint"
-                  class="full-width inputgreen cursor-pointer"
-                  ref="complaintRef"
-                  outlined
-                  dense
-                  lazy-rules
-                  borderless
-                  v-model="formData.complaint"
-                  :rules="[(val) => !!val || `${'กรุณากรอกเรื่องร้องเรียน'}`]"
-                  hide-bottom-space
-                  :label="`${'เรื่องร้องเรียน'}`"
-                  type="textarea"
-                />
-              </div>
-              <div class="row no-wrap col-12">
-                <div class="col-4 q-my-md q-mr-xs">
-                  <q-select
-                    for="#fault"
-                    outlined
-                    dense
-                    ref="faultRef"
-                    v-model="formData.fault"
-                    :rules="[(val) => !!val || `${'กรุณาเลือกลักษณะความผิด'}`]"
-                    :options="investigateFactStore.faultOp"
-                    label="ลักษณะความผิด"
-                    emit-value
-                    map-options
-                    option-label="name"
-                    option-value="id"
-                    use-input
-                    @filter="(inputValue: any,
-            doneFn: Function) => filterFnOptionsType(inputValue, doneFn, 'faultOp'
-            )"
-                    ><template v-slot:no-option>
-                      <q-item>
-                        <q-item-section class="text-grey">
-                          ไม่มีข้อมูล
-                        </q-item-section>
-                      </q-item>
-                    </template>
-                  </q-select>
-                </div>
-                <div class="col-4 q-my-md q-mr-xs">
-                  <q-select
-                    for="#investigation"
-                    outlined
-                    dense
-                    ref="investigationRef"
-                    :rules="[
-                      (val) => !!val || `${'กรุณาเลือกลักษณะการสืบสวน'}`,
-                    ]"
-                    v-model="formData.investigation"
-                    :options="investigateFactStore.investigationOp"
-                    label="ลักษณะการสืบสวน"
-                    emit-value
-                    map-options
-                    option-label="name"
-                    option-value="id"
-                    use-input
-                    @filter="(inputValue: any,
-            doneFn: Function) => filterFnOptionsType(inputValue, doneFn, 'investigationOp'
-            )"
-                    ><template v-slot:no-option>
-                      <q-item>
-                        <q-item-section class="text-grey">
-                          ไม่มีข้อมูล
-                        </q-item-section>
-                      </q-item>
-                    </template>
-                  </q-select>
-                </div>
-              </div>
-              <div
-                v-if="formData.investigation === '003'"
-                class="col-12 q-mb-md"
+        <div class="q-pa-md">
+          <div class="col-xs-12 row items-center q-col-gutter-md">
+            <div class="col-12">
+              <q-input
+                for="#complaint"
+                class="full-width inputgreen cursor-pointer"
+                ref="complaintRef"
+                outlined
+                dense
+                lazy-rules
+                borderless
+                v-model="formData.complaint"
+                :rules="[(val) => !!val || `${'กรุณากรอกเรื่องร้องเรียน'}`]"
+                hide-bottom-space
+                :label="`${'เรื่องร้องเรียน'}`"
+                type="textarea"
+              />
+            </div>
+            <div class="col-6">
+              <q-select
+                for="#fault"
+                outlined
+                dense
+                ref="faultRef"
+                v-model="formData.fault"
+                :rules="[(val) => !!val || `${'กรุณาเลือกลักษณะความผิด'}`]"
+                :options="investigateFactStore.faultOp"
+                label="ลักษณะความผิด"
+                emit-value
+                map-options
+                option-label="name"
+                option-value="id"
+                hide-bottom-space
+                use-input
+                @filter="(inputValue: any,
+                doneFn: Function) => filterFnOptionsType(inputValue, doneFn, 'faultOp'
+                )"
+                ><template v-slot:no-option>
+                  <q-item>
+                    <q-item-section class="text-grey">
+                      ไม่มีข้อมูล
+                    </q-item-section>
+                  </q-item>
+                </template>
+              </q-select>
+            </div>
+            <div class="col-6">
+              <q-select
+                for="#investigation"
+                outlined
+                dense
+                ref="investigationRef"
+                :rules="[
+                  (val) => !!val || `${'กรุณาเลือกลักษณะการสืบสวน'}`,
+                ]"
+                v-model="formData.investigation"
+                :options="investigateFactStore.investigationOp"
+                label="ลักษณะการสืบสวน"
+                emit-value
+                map-options
+                option-label="name"
+                option-value="id"
+                hide-bottom-space
+                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
+              v-if="formData.investigation === '003'"
+              class="col-12"
+            >
+              <q-input
+                for="#other"
+                class="full-width inputgreen cursor-pointer"
+                outlined
+                ref="otherRef"
+                dense
+                borderless
+                v-model="formData.other"
+                hide-bottom-space
+                :label="`${'รายการอื่นๆ(โปรดระบุ)'}`"
+                type="textarea"
+                :rules="[
+                  (val) =>
+                    formData.investigation === '003'
+                      ? !!val || 'กรุณาเลือกจำนวนวันที่ต้องการขยาย'
+                      : true,
+                ]"
+              />
+            </div>
+            <div class="row 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-checkbox
+                      for="#clickTime"
+                      size="md"
+                      v-model="formData.clickTime"
+                      label="ขยายเวลา"
+                      color="primary"
+                      class="text-weight-medium q-ml-sm"
+                      keep-color
+                    />
+                  </div>
+                  <div class="col-12"><q-separator /></div>
+                  <div class="col-xs-12 col-sm-12 q-pa-sm row">
+                    <div v-if="formData.clickTime !== true" class="q-col-gutter-sm row">
+                        <datepicker
+                          menu-class-name="modalfix"
+                          v-model="formData.date"
+                          :locale="'th'"
+                          autoApply
+                          :enableTimePicker="false"
+                          week-start="0"
+                        >
+                          <template #year="{ year }">{{ year + 543 }}</template>
+                          <template #year-overlay-value="{ value }">{{
+                            parseInt(value + 543)
+                          }}</template>
+                          <template #trigger>
+                            <q-input
+                              for="#date"
+                              class="full-width inputgreen cursor-pointer"
+                              ref="dateRef"
+                              outlined
+                              dense
+                              lazy-rules
+                              borderless
+                              hide-bottom-space
+                              :model-value="
+                                formData.date ? date2Thai(formData.date) : null
+                              "
+                              :rules="[
+                                (val) =>
+                                  !!val || `${'กรุณาเลือกวันที่เริ่มการสอบสวน'}`,
+                              ]"
+                              :label="`${'วันที่เริ่มการสอบสวน'}`"
+                            >
+                              <template v-slot:prepend>
+                                <q-icon
+                                  name="event"
+                                  class="cursor-pointer"
+                                  color="primary"
+                                >
+                                </q-icon>
+                              </template>
+                            </q-input>
+                          </template>
+                        </datepicker>
+                        <datepicker
+                          menu-class-name="modalfix"
+                          v-model="formData.dateEnd"
+                          :locale="'th'"
+                          autoApply
+                          :enableTimePicker="false"
+                          week-start="0"
+                        >
+                          <template #year="{ year }">{{ year + 543 }}</template>
+                          <template #year-overlay-value="{ value }">{{
+                            parseInt(value + 543)
+                          }}</template>
+                          <template #trigger>
+                            <q-input
+                              for="#dateEnd"
+                              ref="dateEndRef"
+                              class="full-width inputgreen cursor-pointer"
+                              outlined
+                              dense
+                              lazy-rules
+                              hide-bottom-space
+                              borderless
+                              :model-value="
+                                formData.dateEnd
+                                  ? date2Thai(formData.dateEnd)
+                                  : null
+                              "
+                              :rules="[
+                                (val) =>
+                                  !!val || `${'กรุณาเลือกวันที่สิ้นสุดการสอบสวน'}`,
+                              ]"
+                              :label="`${'วันที่สิ้นสุดการสอบสวน'}`"
+                            >
+                              <template v-slot:prepend>
+                                <q-icon
+                                  name="event"
+                                  class="cursor-pointer"
+                                  color="primary"
+                                >
+                                </q-icon>
+                              </template>
+                            </q-input>
+                          </template>
+                        </datepicker>
+                    </div>
+                    <div v-else class="q-mx-xs col-xs-12 col-sm-6">
+                      <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 === true
+                              ? !!val || 'กรุณาเลือกจำนวนวันที่ต้องการขยาย'
+                              : true,
+                        ]"
+                        option-label="name"
+                        option-value="id"
+                        use-input
+                        @filter="(inputValue: any,
+                doneFn: Function) => filterFnOptionsType(inputValue, doneFn, 'daysExtendOp'
+                )"
+                        ><template v-slot:no-option>
+                          <q-item>
+                            <q-item-section class="text-grey">
+                              ไม่มีข้อมูล
+                            </q-item-section>
+                          </q-item>
+                        </template>
+                      </q-select>
+                    </div>
+                  </div>
+                </q-card>
+            </div>
+            <div class="col-12 ">
+              <q-input
+                for="#complaintdetail"
+                class="full-width inputgreen cursor-pointer"
+                outlined
+                ref="complaintdetailRef"
+                dense
+                lazy-rules
+                borderless
+                v-model="formData.complaintdetail"
+                :rules="[
+                  (val) => !!val || `${'กรุณากรอกรายละเอียดเรื่องร้องเรียน'}`,
+                ]"
+                hide-bottom-space
+                :label="`${'รายละเอียดเรื่องร้องเรียน'}`"
+                type="textarea"
+              />
+            </div>
+            <div class="col-12">
+              <q-file
+                for="#fileComplaint"
+                outlined
+                ref="fileComplaintRef"
+                dense
+                v-model="formData.fileComplaint"
+                label="ไฟล์เอกสารหลักฐานเรื่องร้องเรียน"
+                lazy-rules
+                :rules="[(val) => !!val || 'กรุณาเลือกไฟล์หลักฐานการรับ']"
+                hide-bottom-space
               >
+                <template v-slot:prepend>
+                  <q-icon name="attach_file" color="primary" />
+                </template>
+              </q-file>
+            </div>
+            <div class="col-12">
+              <q-input
+                for="#detail"
+                class="full-width inputgreen cursor-pointer"
+                outlined
+                ref="detailRef"
+                dense
+                lazy-rules
+                borderless
+                v-model="formData.detail"
+                :rules="[(val) => !!val || `${'กรุณากรอกรายละเอียด'}`]"
+                hide-bottom-space
+                :label="`${'รายละเอียด'}`"
+                type="textarea"
+              />
+            </div>
+            <div class="col-12">
+              <q-file
+                for="#evidenceFiles"
+                outlined
+                dense
+                ref="evidenceFilesRef"
+                v-model="formData.evidenceFiles"
+                label="ไฟล์หลักฐานการรับ"
+                lazy-rules
+                :rules="[(val) => !!val || 'กรุณาเลือกไฟล์หลักฐานการรับ']"
+                hide-bottom-space
+              >
+                <template v-slot:prepend>
+                  <q-icon name="attach_file" color="primary" />
+                </template>
+              </q-file>
+            </div>
+            <div class="row col-12 items-start">
+              <div class="col-4">
                 <q-input
-                  for="#other"
-                  class="full-width inputgreen cursor-pointer"
-                  outlined
-                  ref="otherRef"
+                  for="#results"
+                  standout
                   dense
-                  borderless
-                  v-model="formData.other"
+                  ref="resultsRef"
+                  :rules="[(val) => !!val || `${'กรุณากรอกผลการสืบสวน'}`]"
+                  v-model="formData.results"
+                  outlined
+                  debounce="300"
+                  placeholder="ผลการสืบสวน"
                   hide-bottom-space
-                  :label="`${'รายการอื่นๆ(โปรดระบุ)'}`"
-                  type="textarea"
-                  :rules="[
-                    (val) =>
-                      formData.investigation === '003'
-                        ? !!val || 'กรุณาเลือกจำนวนวันที่ต้องการขยาย'
-                        : true,
-                  ]"
-                />
-              </div>
-
-              <div class="row items-start col-12">
-                <p
-                  class="text-weight-medium q-ma-none text-center align-top q-pt-sm"
                 >
-                  วันที่สืบสวน
-                </p>
-                <q-checkbox
-                  for="#clickTime"
-                  size="md"
-                  v-model="formData.clickTime"
-                  label="ขยายเวลา"
+                </q-input>
+              </div>
+              <div class="col-4">
+                <q-btn
+                  id="#confirm"
+                  label="ยืนยันผลการสืบสวน"
                   color="primary"
-                  class="text-weight-medium q-ml-sm"
-                  keep-color
-                />
-                <div v-if="formData.clickTime !== true" class="self-start row">
-                  <div class="q-mx-xs">
-                    <datepicker
-                      menu-class-name="modalfix"
-                      v-model="formData.date"
-                      :locale="'th'"
-                      autoApply
-                      :enableTimePicker="false"
-                      week-start="0"
-                    >
-                      <template #year="{ year }">{{ year + 543 }}</template>
-                      <template #year-overlay-value="{ value }">{{
-                        parseInt(value + 543)
-                      }}</template>
-                      <template #trigger>
-                        <q-input
-                          for="#date"
-                          class="full-width inputgreen cursor-pointer"
-                          ref="dateRef"
-                          outlined
-                          dense
-                          lazy-rules
-                          borderless
-                          :model-value="
-                            formData.date ? date2Thai(formData.date) : null
-                          "
-                          :rules="[
-                            (val) =>
-                              !!val || `${'กรุณาเลือกวันที่เริ่มการสอบสวน'}`,
-                          ]"
-                          :label="`${'วันที่เริ่มการสอบสวน'}`"
-                        >
-                          <template v-slot:prepend>
-                            <q-icon
-                              name="event"
-                              class="cursor-pointer"
-                              color="primary"
-                            >
-                            </q-icon>
-                          </template>
-                        </q-input>
-                      </template>
-                    </datepicker>
-                  </div>
-                  <div class="q-mx-xs q-">
-                    <datepicker
-                      menu-class-name="modalfix"
-                      v-model="formData.dateEnd"
-                      :locale="'th'"
-                      autoApply
-                      :enableTimePicker="false"
-                      week-start="0"
-                    >
-                      <template #year="{ year }">{{ year + 543 }}</template>
-                      <template #year-overlay-value="{ value }">{{
-                        parseInt(value + 543)
-                      }}</template>
-                      <template #trigger>
-                        <q-input
-                          for="#dateEnd"
-                          ref="dateEndRef"
-                          class="full-width inputgreen cursor-pointer"
-                          outlined
-                          dense
-                          lazy-rules
-                          borderless
-                          :model-value="
-                            formData.dateEnd
-                              ? date2Thai(formData.dateEnd)
-                              : null
-                          "
-                          :rules="[
-                            (val) =>
-                              !!val || `${'กรุณาเลือกวันที่สิ้นสุดการสอบสวน'}`,
-                          ]"
-                          :label="`${'วันที่สิ้นสุดการสอบสวน'}`"
-                        >
-                          <template v-slot:prepend>
-                            <q-icon
-                              name="event"
-                              class="cursor-pointer"
-                              color="primary"
-                            >
-                            </q-icon>
-                          </template>
-                        </q-input>
-                      </template>
-                    </datepicker>
-                  </div>
-                </div>
-                <div v-else class="q-mx-xs">
-                  <q-select
-                    for="#daysExtend"
-                    outlined
-                    dense
-                    lazy-rules
-                    ref="daysExtendRef"
-                    v-model="formData.daysExtend"
-                    :options="investigateFactStore.daysExtendOp"
-                    label="จำนวนวันที่ต้องการขยาย"
-                    emit-value
-                    map-options
-                    :rules="[
-                      (val) =>
-                        formData.clickTime === true
-                          ? !!val || 'กรุณาเลือกจำนวนวันที่ต้องการขยาย'
-                          : true,
-                    ]"
-                    option-label="name"
-                    option-value="id"
-                    use-input
-                    @filter="(inputValue: any,
-            doneFn: Function) => filterFnOptionsType(inputValue, doneFn, 'daysExtendOp'
-            )"
-                    ><template v-slot:no-option>
-                      <q-item>
-                        <q-item-section class="text-grey">
-                          ไม่มีข้อมูล
-                        </q-item-section>
-                      </q-item>
-                    </template>
-                  </q-select>
-                </div>
-              </div>
-              <div class="col-12 q-my-xs">
-                <q-input
-                  for="#complaintdetail"
-                  class="full-width inputgreen cursor-pointer"
-                  outlined
-                  ref="complaintdetailRef"
-                  dense
-                  lazy-rules
-                  borderless
-                  v-model="formData.complaintdetail"
-                  :rules="[
-                    (val) => !!val || `${'กรุณากรอกรายละเอียดเรื่องร้องเรียน'}`,
-                  ]"
-                  hide-bottom-space
-                  :label="`${'รายละเอียดเรื่องร้องเรียน'}`"
-                  type="textarea"
-                />
-              </div>
-              <div class="col-12 q-my-sm">
-                <q-file
-                  for="#fileComplaint"
-                  outlined
-                  ref="fileComplaintRef"
-                  dense
-                  v-model="formData.fileComplaint"
-                  label="ไฟล์เอกสารหลักฐานเรื่องร้องเรียน"
-                  lazy-rules
-                  :rules="[(val) => !!val || 'กรุณาเลือกไฟล์หลักฐานการรับ']"
-                  hide-bottom-space
+                  class="q-py-sm q-ml-sm"
                 >
-                  <template v-slot:prepend>
-                    <q-icon name="attach_file" color="primary" />
-                  </template>
-                </q-file>
-              </div>
-              <div class="col-12 q-my-sm">
-                <q-input
-                  for="#detail"
-                  class="full-width inputgreen cursor-pointer"
-                  outlined
-                  ref="detailRef"
-                  dense
-                  lazy-rules
-                  borderless
-                  v-model="formData.detail"
-                  :rules="[(val) => !!val || `${'กรุณากรอกรายละเอียด'}`]"
-                  hide-bottom-space
-                  :label="`${'รายละเอียด'}`"
-                  type="textarea"
-                />
-              </div>
-              <div class="col-12 q-my-xs">
-                <q-file
-                  for="#evidenceFiles"
-                  outlined
-                  dense
-                  ref="evidenceFilesRef"
-                  v-model="formData.evidenceFiles"
-                  label="ไฟล์หลักฐานการรับ"
-                  lazy-rules
-                  :rules="[(val) => !!val || 'กรุณาเลือกไฟล์หลักฐานการรับ']"
-                  hide-bottom-space
-                >
-                  <template v-slot:prepend>
-                    <q-icon name="attach_file" color="primary" />
-                  </template>
-                </q-file>
-              </div>
-              <div class="row col-12 items-start q-mt-sm">
-                <div class="col-4">
-                  <q-input
-                    for="#results"
-                    standout
-                    dense
-                    ref="resultsRef"
-                    :rules="[(val) => !!val || `${'กรุณากรอกผลการสืบสวน'}`]"
-                    v-model="formData.results"
-                    outlined
-                    debounce="300"
-                    placeholder="ผลการสืบสวน"
-                  >
-                  </q-input>
-                </div>
-                <div class="col-4">
-                  <q-btn
-                    id="#confirm"
-                    label="ยืนยันผลการสืบสวน"
-                    color="public"
-                    class="q-py-sm q-ml-sm"
-                  >
-                    <q-tooltip>ยืนยันผลการสืบสวน</q-tooltip>
-                  </q-btn>
-                </div>
+                  <q-tooltip>ยืนยันผลการสืบสวน</q-tooltip>
+                </q-btn>
               </div>
             </div>
           </div>
@@ -464,6 +463,5 @@ watch(props.data, async () => {
           >
         </div>
       </form>
-    </div>
   </q-card>
 </template>
diff --git a/src/modules/11_discipline/components/3_InvestigateDisciplinary/Dialogbody.vue b/src/modules/11_discipline/components/3_InvestigateDisciplinary/Dialogbody.vue
index 38349b77b..4e030bfd1 100644
--- a/src/modules/11_discipline/components/3_InvestigateDisciplinary/Dialogbody.vue
+++ b/src/modules/11_discipline/components/3_InvestigateDisciplinary/Dialogbody.vue
@@ -22,6 +22,7 @@ const visibleColumns2 = ref<string[]>([
   "duty",
   "email",
   "telephone",
+  "role"
 ]);
 const columns2 = ref<QTableProps["columns"]>([
   {
@@ -90,6 +91,17 @@ const columns2 = ref<QTableProps["columns"]>([
     sort: (a: string, b: string) =>
       a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
   },
+  {
+    name: "role",
+    align: "left",
+    label: "จำนวนเรื่องสืบสวน",
+    sortable: true,
+    field: "role",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
 ]);
 
 const props = defineProps({
@@ -138,35 +150,28 @@ watchEffect(() => {
     <q-card style="width: 1200px; max-width: 80vw">
       <DialogHeader title="เลือกรายชื่อกรรมการ" :close="clickClose" />
       <q-separator />
-      <q-card-section class="q-pt-none">
-        <div>
-          <div>
-            <q-toolbar style="padding: 0">
-              <q-input
-                borderless
-                outlined
-                dense
-                class="col-12"
-                debounce="300"
-                :model-value="filterKeyword2"
-                @update:model-value="updateInput"
-                placeholder="ค้นหารายชื่อ"
-                style="max-width: 100%"
-              >
-                <template v-slot:append>
-                  <q-icon v-if="filterKeyword2 == ''" name="search" />
-                  <q-icon
-                    v-if="filterKeyword2 !== ''"
-                    name="clear"
-                    class="cursor-pointer"
-                    @click="Reset"
-                  />
-                </template>
-              </q-input>
-            </q-toolbar>
-          </div>
-        </div>
-
+      <q-card-section >
+        <q-input
+          borderless
+          outlined
+          dense
+          class="col-12 q-mb-sm"
+          debounce="300"
+          :model-value="filterKeyword2"
+          @update:model-value="updateInput"
+          placeholder="ค้นหารายชื่อ"
+          style="max-width: 100%"
+        >
+          <template v-slot:append>
+            <q-icon v-if="filterKeyword2 == ''" name="search" />
+            <q-icon
+              v-if="filterKeyword2 !== ''"
+              name="clear"
+              class="cursor-pointer"
+              @click="Reset"
+            />
+          </template>
+        </q-input>
         <d-table
           :columns="columns2"
           :rows="rows2"
@@ -208,6 +213,8 @@ watchEffect(() => {
         </d-table>
       </q-card-section>
 
+      <q-separator />
+
       <q-card-actions align="right" class="bg-white text-teal">
         <q-btn
           label="เพิ่มรายชื่อกรรมการ"
diff --git a/src/modules/11_discipline/components/3_InvestigateDisciplinary/Form.vue b/src/modules/11_discipline/components/3_InvestigateDisciplinary/Form.vue
index 4695b18d6..a4b53484c 100644
--- a/src/modules/11_discipline/components/3_InvestigateDisciplinary/Form.vue
+++ b/src/modules/11_discipline/components/3_InvestigateDisciplinary/Form.vue
@@ -30,6 +30,7 @@ onMounted(async () => {
       duty: "ประธาน",
       email: "e@email.com",
       telephone: "0800808080",
+      role: "4",
     },
     {
       nameDirector: "นาย สรวิชญ์ พลสิทธิ์",
@@ -37,6 +38,7 @@ onMounted(async () => {
       duty: "เลขานุการ",
       email: "g@gmail.com",
       telephone: "0614565145",
+      role: "6",
     },
   ]);
   await hideLoader();
@@ -213,10 +215,8 @@ watch(props.data, async () => {
     <form @submit.prevent="validateForm">
       <div class="col-12">
         <q-card bordered>
-          <div class="col-12 row q-col-gutter-md q-pa-md">
-            <div class="col-xs-12 col-sm-12 row">
-              <q-separator />
-              <div class="col-12 row q-pa-sm q-col-gutter-sm">
+          <div class="col-12 row q-pa-md">
+              <div class="col-12 row q-col-gutter-md">
                 <q-input
                   class="col-12"
                   dense
@@ -225,6 +225,7 @@ watch(props.data, async () => {
                   for="#Complaint"
                   ref="complaintRef"
                   label="เรื่องร้องเรียน"
+                  hide-bottom-space
                   type="textarea"
                   :rules="[(val:string) => !!val || `${'กรุณากรอกเรื่องร้องเรียน'}`]"
                 />
@@ -251,6 +252,7 @@ watch(props.data, async () => {
                       outlined
                       dense
                       class="full-width datepicker"
+                      hide-bottom-space
                       :model-value="
                         dateInvestigate != null
                           ? date2Thai(dateInvestigate)
@@ -293,6 +295,7 @@ watch(props.data, async () => {
                       outlined
                       dense
                       class="col-xs-12 col-sm-4"
+                      hide-bottom-space
                       :model-value="
                         dateAllegation != null
                           ? date2Thai(dateAllegation)
@@ -338,6 +341,7 @@ watch(props.data, async () => {
                       outlined
                       dense
                       class="full-width datepicker"
+                      hide-bottom-space
                       :model-value="
                         dateEvident != null ? date2Thai(dateEvident) : null
                       "
@@ -358,65 +362,70 @@ watch(props.data, async () => {
                     </q-input>
                   </template>
                 </datepicker>
-                <div class="col-xs-12 col-sm-12 text-bold">
-                  กรรมการ
-                  <q-btn
-                    size="12px"
-                    flat
-                    round
-                    color="add"
-                    @click="popup()"
-                    icon="mdi-plus"
-                  >
-                    <q-tooltip>เพิ่มกรรมการ</q-tooltip>
-                  </q-btn>
+                <div 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
+                        color="add"
+                        @click="popup()"
+                        icon="mdi-plus"
+                      >
+                        <q-tooltip>เพิ่มกรรมการ</q-tooltip>
+                      </q-btn>
+                    </div>
+                    <div class="col-12"><q-separator /></div>
+                    <div class="col-xs-12 q-pa-sm row">
+                      <Table
+                        class="col-12"
+                        style="max-height: 80vh"
+                        :rows="rows"
+                        :columns="investigateDis.columnsDirector"
+                        :filter="filter"
+                        :visible-columns="investigateDis.visibleColumnsDirector"
+                        v-model:inputfilter="filter"
+                        v-model:inputvisible="investigateDis.visibleColumnsDirector"
+                        :pagination="initialPagination"
+                        :nornmalData="true"
+                        :paging="true"
+                        :titleText="''"
+                      >
+                        <template #columns="props">
+                          <q-tr :props="props" class="cursor-pointer">
+                            <q-td
+                              v-for="col in props.cols"
+                              :key="col.name"
+                              :props="props"
+                            >
+                              <div v-if="col.name == 'no'" class="table_ellipsis2">
+                                {{ props.rowIndex + 1 }}
+                              </div>
+                              <div v-else class="table_ellipsis2">
+                                {{ col.value }}
+                              </div>
+                            </q-td>
+                            <q-td>
+                              <q-btn
+                                dense
+                                size="12px"
+                                flat
+                                round
+                                color="red"
+                                @click="deleteData(props.row.id)"
+                                icon="mdi-delete"
+                              >
+                                <q-tooltip>ลบข้อมูล</q-tooltip>
+                              </q-btn>
+                            </q-td>
+                          </q-tr>
+                        </template>
+                      </Table>
+                    </div>
+                  </q-card>
                 </div>
-                <div class="col-xs-12 col-sm-12 q-pb-md">
-                  <Table
-                    style="max-height: 80vh"
-                    :rows="rows"
-                    :columns="investigateDis.columnsDirector"
-                    :filter="filter"
-                    :visible-columns="investigateDis.visibleColumnsDirector"
-                    v-model:inputfilter="filter"
-                    v-model:inputvisible="investigateDis.visibleColumnsDirector"
-                    :pagination="initialPagination"
-                    :nornmalData="true"
-                    :paging="true"
-                    :titleText="''"
-                  >
-                    <template #columns="props">
-                      <q-tr :props="props" class="cursor-pointer">
-                        <q-td
-                          v-for="col in props.cols"
-                          :key="col.name"
-                          :props="props"
-                        >
-                          <div v-if="col.name == 'no'" class="table_ellipsis2">
-                            {{ props.rowIndex + 1 }}
-                          </div>
-                          <div v-else class="table_ellipsis2">
-                            {{ col.value }}
-                          </div>
-                        </q-td>
-                        <q-td>
-                          <q-btn
-                            dense
-                            size="12px"
-                            flat
-                            round
-                            color="red"
-                            @click="deleteData(props.row.id)"
-                            icon="mdi-delete"
-                          >
-                            <q-tooltip>ลบข้อมูล</q-tooltip>
-                          </q-btn>
-                        </q-td>
-                      </q-tr>
-                    </template>
-                  </Table>
-                </div>
-
                 <q-input
                   class="col-xs-12 col-sm-6"
                   dense
@@ -425,12 +434,14 @@ watch(props.data, async () => {
                   v-model="formData.casefault"
                   for="#casefault"
                   label="กรณีมีความผิด"
+                  hide-bottom-space
                   :rules="[(val) => !!val || `${'กรุณากรอกกรณีมีความผิด'}`]"
                   lazy-rules
                 />
                 <q-input
                   class="col-xs-12 col-sm-6"
                   dense
+                  hide-bottom-space
                   outlined
                   for="#whereInvestigate"
                   ref="whereInvestigateRef"
@@ -450,6 +461,7 @@ watch(props.data, async () => {
                   option-value="id"
                   emit-value
                   map-options
+                  hide-bottom-space
                   :options="investigateDis.optionsTypefault"
                   label="ลักษณะความผิด"
                 />
@@ -464,13 +476,15 @@ watch(props.data, async () => {
                   option-value="id"
                   emit-value
                   map-options
+                  hide-bottom-space
                   :options="investigateDis.optionsfaultLevel"
                   label="ระดับโทษความผิด"
                 />
                 <q-input
-                  class="col-xs-12 col-sm-6 q-pb-md"
+                  class="col-xs-12 col-sm-6"
                   dense
                   for="#refLaw"
+                  hide-bottom-space
                   outlined
                   ref="refLawRef"
                   v-model="formData.refLaw"
@@ -484,6 +498,7 @@ watch(props.data, async () => {
                   class="col-12"
                   dense
                   outlined
+                  hide-bottom-space
                   for="#detailComplaint"
                   ref="detailComplaintRef"
                   v-model="formData.detailComplaint"
@@ -495,6 +510,7 @@ watch(props.data, async () => {
                   class="col-12"
                   dense
                   outlined
+                  hide-bottom-space
                   for="#trueDetail"
                   ref="trueDetailRef"
                   v-model="formData.trueDetail"
@@ -502,90 +518,123 @@ watch(props.data, async () => {
                   type="textarea"
                   :rules="[(val:string) => !!val || `${'กรุณากรอกรายละเอียดสืบสวนข้อเท็จจริง'}`]"
                 />
-                <q-input
-                  class="col-12"
-                  dense
-                  outlined
-                  for="#evidence"
-                  ref="evidenceRef"
-                  v-model="formData.evidence"
-                  label="สรุปพยานหลักฐานสนับสนุนข้อกล่าวหา"
-                  type="textarea"
-                  :rules="[(val:string) => !!val || `${'กรุณากรอกสรุปพยานหลักฐานสนับสนุนข้อกล่าวหา'}`]"
-                />
-                <q-file
-                  class="col-12 q-pb-md"
-                  outlined
-                  dense
-                  ref="filesEvidenceRef"
-                  for="#filesEvidence"
-                  v-model="formData.filesEvidence"
-                  @added="fileUploadDoc"
-                  label="ไฟล์เอกสารหลักฐานสรุปพยานหลักฐานสนับสนุนข้อกล่าวหา"
-                  hide-bottom-space
-                  lazy-rules
-                  accept=".pdf,.xlsx,.doc"
-                >
-                  <template v-slot:prepend>
-                    <q-icon name="attach_file" />
-                  </template>
-                </q-file>
-                <q-input
-                  class="col-12"
-                  dense
-                  outlined
-                  ref="recordAccuserRef"
-                  for="#recordAccuser"
-                  v-model="formData.recordAccuser"
-                  label="บันทึกถ้อยคำของผู้กล่าวหา"
-                  type="textarea"
-                  :rules="[(val:string) => !!val || `${'กรุณากรอกบันทึกถ้อยคำของผู้กล่าวหา'}`]"
-                />
-                <q-file
-                  class="col-12 q-pb-md"
-                  outlined
-                  dense
-                  ref="filesRecordAccuserRef"
-                  for="#filesRecordAccuser"
-                  v-model="formData.filesRecordAccuser"
-                  @added="fileUploadDoc"
-                  label="ไฟล์เอกสารบันทึกถ้อยคำของผู้กล่าวหา"
-                  hide-bottom-space
-                  lazy-rules
-                  accept=".pdf,.xlsx,.doc"
-                >
-                  <template v-slot:prepend>
-                    <q-icon name="attach_file" />
-                  </template>
-                </q-file>
-                <q-input
-                  class="col-12"
-                  dense
-                  outlined
-                  for="#witnesses"
-                  ref="witnessesRef"
-                  v-model="formData.witnesses"
-                  label="พยานและการบันทึกถ้อยคำ"
-                  type="textarea"
-                  :rules="[(val:string) => !!val || `${'กรุณากรอกพยานและการบันทึกถ้อยคำ'}`]"
-                />
-                <q-file
-                  class="col-12 q-pb-md"
-                  outlined
-                  dense
-                  ref="filesWitnessesRef"
-                  for="#filesWitnesses"
-                  v-model="formData.filesWitnesses"
-                  @added="fileUploadDoc"
-                  label="ไฟล์เอกสารพยานและการบันทึกถ้อยคำ"
-                  hide-bottom-space
-                  lazy-rules
-                  accept=".pdf,.xlsx,.doc"
-                >
-                  <template v-slot:prepend>
-                    <q-icon name="attach_file" />
-                  </template>
-                </q-file>
+                <div class="row col-12">
+                  <q-card bordered class="row col-12" style="border:1px solid #d6dee1;">
+                    <div class="col-xs-12 col-sm-12 text-weight-medium bg-grey-1 q-py-xs q-px-md">
+                      หลักฐานสนับสนุนข้อกล่าวหา
+                    </div>
+                    <div class="col-12"><q-separator /></div>
+                    <div class="col-xs-12 q-pa-sm row">
+                      <q-input
+                        class="col-12"
+                        dense
+                        outlined
+                        for="#evidence"
+                        ref="evidenceRef"
+                        hide-bottom-space
+                        v-model="formData.evidence"
+                        label="สรุปพยานหลักฐานสนับสนุนข้อกล่าวหา"
+                        type="textarea"
+                        :rules="[(val:string) => !!val || `${'กรุณากรอกสรุปพยานหลักฐานสนับสนุนข้อกล่าวหา'}`]"
+                      />
+                      <q-file
+                        class="col-12 q-mt-sm"
+                        outlined
+                        dense
+                        ref="filesEvidenceRef"
+                        for="#filesEvidence"
+                        v-model="formData.filesEvidence"
+                        @added="fileUploadDoc"
+                        label="ไฟล์เอกสารหลักฐานสรุปพยานหลักฐานสนับสนุนข้อกล่าวหา"
+                        hide-bottom-space
+                        lazy-rules
+                        accept=".pdf,.xlsx,.doc"
+                      >
+                        <template v-slot:prepend>
+                          <q-icon name="attach_file" />
+                        </template>
+                      </q-file>
+                    </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">
+                      บันทึกถ้อยคำของผู้กล่าวหา
+                    </div>
+                    <div class="col-12"><q-separator /></div>
+                    <div class="col-xs-12 q-pa-sm row">
+                      <q-input
+                        class="col-12"
+                        dense
+                        outlined
+                        ref="recordAccuserRef"
+                        for="#recordAccuser"
+                        v-model="formData.recordAccuser"
+                        label="บันทึกถ้อยคำของผู้กล่าวหา"
+                        hide-bottom-space
+                        type="textarea"
+                        :rules="[(val:string) => !!val || `${'กรุณากรอกบันทึกถ้อยคำของผู้กล่าวหา'}`]"
+                      />
+                      <q-file
+                        class="col-12 q-mt-sm"
+                        outlined
+                        dense
+                        ref="filesRecordAccuserRef"
+                        for="#filesRecordAccuser"
+                        v-model="formData.filesRecordAccuser"
+                        @added="fileUploadDoc"
+                        label="ไฟล์เอกสารบันทึกถ้อยคำของผู้กล่าวหา"
+                        hide-bottom-space
+                        lazy-rules
+                        accept=".pdf,.xlsx,.doc"
+                      >
+                        <template v-slot:prepend>
+                          <q-icon name="attach_file" />
+                        </template>
+                      </q-file>
+                    </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">
+                      พยานและการบันทึกถ้อยคำ
+                    </div>
+                    <div class="col-12"><q-separator /></div>
+                    <div class="col-xs-12 q-pa-sm row">
+                      <q-input
+                        class="col-12"
+                        dense
+                        outlined
+                        for="#witnesses"
+                        ref="witnessesRef"
+                        v-model="formData.witnesses"
+                        label="พยานและการบันทึกถ้อยคำ"
+                        hide-bottom-space
+                        type="textarea"
+                        :rules="[(val:string) => !!val || `${'กรุณากรอกพยานและการบันทึกถ้อยคำ'}`]"
+                      />
+                      <q-file
+                        class="col-12 q-mt-sm"
+                        outlined
+                        dense
+                        ref="filesWitnessesRef"
+                        for="#filesWitnesses"
+                        v-model="formData.filesWitnesses"
+                        @added="fileUploadDoc"
+                        label="ไฟล์เอกสารพยานและการบันทึกถ้อยคำ"
+                        hide-bottom-space
+                        lazy-rules
+                        accept=".pdf,.xlsx,.doc"
+                      >
+                        <template v-slot:prepend>
+                          <q-icon name="attach_file" />
+                        </template>
+                      </q-file>
+                    </div>
+                  </q-card>
+                </div>
                 <q-input
                   class="col-12"
                   dense
@@ -594,6 +643,7 @@ watch(props.data, async () => {
                   ref="InvestResultsRef"
                   v-model="formData.InvestResults"
                   label="ผลการสอบสวน"
+                  hide-bottom-space
                   type="textarea"
                   :rules="[(val:string) => !!val || `${'กรุณากรอกผลการสอบสวน'}`]"
                 />
@@ -615,7 +665,6 @@ watch(props.data, async () => {
                   </template>
                 </q-file>
               </div>
-            </div>
           </div>
           <q-separator />
           <div class="row col-12 q-pa-sm">
diff --git a/src/modules/11_discipline/components/6_BasicInformation/Director/Form.vue b/src/modules/11_discipline/components/6_BasicInformation/Director/Form.vue
index ac2e3b1e5..cc2a953ca 100644
--- a/src/modules/11_discipline/components/6_BasicInformation/Director/Form.vue
+++ b/src/modules/11_discipline/components/6_BasicInformation/Director/Form.vue
@@ -29,6 +29,7 @@ const formData = reactive<FormData>({
   position: "",
   phone: "",
   email: "",
+  role: "",
 });
 
 watch(props.data, async () => {
@@ -39,6 +40,7 @@ watch(props.data, async () => {
   formData.position = props.data.position;
   formData.phone = props.data.phone;
   formData.email = props.data.email;
+  formData.role = props.data.role;
 });
 
 // เพิ่มบุคลากร
@@ -55,6 +57,7 @@ const lastnameRef = ref<object | null>(null);
 const positionRef = ref<object | null>(null);
 const phoneRef = ref<object | null>(null);
 const emailRef = ref<object | null>(null);
+const roleRef = ref<object | null>(null);
 const formRef: FormRef = {
   prefix: prefixRef,
   firstname: firstnameRef,
@@ -62,6 +65,7 @@ const formRef: FormRef = {
   position: positionRef,
   phone: phoneRef,
   email: emailRef,
+  role: roleRef,
 };
 
 function onValidate() {
diff --git a/src/modules/11_discipline/interface/index/Main.ts b/src/modules/11_discipline/interface/index/Main.ts
index 7ea6a448f..6ecb18bd3 100644
--- a/src/modules/11_discipline/interface/index/Main.ts
+++ b/src/modules/11_discipline/interface/index/Main.ts
@@ -29,6 +29,7 @@ interface directorType {
   duty: string;
   email: string;
   telephone: string;
+  role: string;
 }
 
 export type {
diff --git a/src/modules/11_discipline/interface/request/director.ts b/src/modules/11_discipline/interface/request/director.ts
index ef4ffc25f..2dc5e971a 100644
--- a/src/modules/11_discipline/interface/request/director.ts
+++ b/src/modules/11_discipline/interface/request/director.ts
@@ -5,6 +5,7 @@ interface FormData {
     position: string;
     phone: string;
     email: string;
+    role: string;
     responsibilities:string
 }
 interface FormRef {
@@ -14,6 +15,7 @@ interface FormRef {
     position: object | null;
     phone: object | null;
     email: object | null;
+    role: object | null;
     [key: string]: any;
 }
 
diff --git a/src/modules/11_discipline/store/InvestigateDisStore.ts b/src/modules/11_discipline/store/InvestigateDisStore.ts
index 7fa168358..182bd5a0d 100644
--- a/src/modules/11_discipline/store/InvestigateDisStore.ts
+++ b/src/modules/11_discipline/store/InvestigateDisStore.ts
@@ -51,6 +51,7 @@ export const useInvestigateDisStore = defineStore(
         duty: e.duty,
         email: e.email,
         telephone: e.telephone,
+        role: e.role,
       }));
       rows2.value = datalistDirector;
       selected.value = rows2.value;
@@ -204,6 +205,7 @@ export const useInvestigateDisStore = defineStore(
       "duty",
       "email",
       "telephone",
+      "role",
     ]);
     const columnsDirector = ref<QTableProps["columns"]>([
       {
@@ -260,6 +262,15 @@ export const useInvestigateDisStore = defineStore(
         headerStyle: "font-size: 14px",
         style: "font-size: 14px",
       },
+      {
+        name: "role",
+        align: "left",
+        label: "จำนวนเรื่องสืบสวน",
+        sortable: true,
+        field: "role",
+        headerStyle: "font-size: 14px",
+        style: "font-size: 14px",
+      },
     ]);
     return {
       fecthList,