ปรับ UI ระบบวินัย

src/components/Dialogs/AddPersonal.vue

@@ -179,9 +179,9 @@ watch(
         />
       </q-toolbar>
       <q-separator />
-      <q-card-section class="q-pa-md bg-grey-1">
+      <q-card-section class="q-pa-md">
         <div class="row col-12 q-col-gutter-sm items-start">
-          <div class="col-12 col-sm-6 col-md-3">
+          <div class="col-12 col-sm-5 col-md-3">
             <q-select
               label="ค้นหาจาก"
               v-model="type"
@@ -196,7 +196,7 @@ watch(
             />
           </div>
 
-          <div class="col-12 col-sm-6 col-md-6">
+          <div class="col-12 col-sm-7 col-md-9">
             <q-input
               ref="searchRef"
               v-model="search"
@@ -205,22 +205,23 @@ watch(
               dense
               label="คำค้น"
               :rules="[(val) => !!val || `กรุณากรอกคำค้น`]"
-            />
+            >
-          </div>
+            <template v-slot:after>
-
-          <div class="col-12 col-sm-6 col-md-2">
               <q-btn
                 color="primary"
                 icon="search"
                 label="ค้นหา"
-              class="full-width q-pa-sm"
+                outline
+                class="full-width q-py-sm q-px-md"
                 @click="searchInput()"
               >
               </q-btn>
+            </template>
+            </q-input>
           </div>
         </div>
 
-        <div class="full-width q-mt-sm">
+        <div class="full-width">
           <d-table
             ref="table"
             :columns="mainStore.columnsRespondent"

src/modules/11_discipline/components/1_Complaint/AddComplaintPage.vue

@@ -87,6 +87,6 @@ async function onSubmit(data: any) {
       เพิ่มเรื่องร้องเรียน
     </div>
 
-    <Form :on-submit="onSubmit" />
+    <q-card bordered><Form :on-submit="onSubmit" /></q-card>
   </div>
 </template>

src/modules/11_discipline/components/1_Complaint/EditPage.vue

@@ -406,7 +406,7 @@ onMounted(() => {
       </div>
     </div>
 
-    <Form :on-submit="onSubmit" :data="data" :get-data="getData" />
+    <q-card bordered><Form :on-submit="onSubmit" :data="data" :get-data="getData" /></q-card>
     <PopupSendToNext
       :modal="modalPopup"
       :close="closePopup"

src/modules/11_discipline/components/1_Complaint/Form.vue

@@ -360,23 +360,24 @@ onMounted(() => {
 
 <template>
   <div  class="row col-12 bg-white">
-    <div class="col-sm-12 col-md-9">
+    <div v-if="isSave" class=" col-12">
-      <div v-if="isSave" class="q-pa-sm q-gutter-sm">
       <q-banner
         inline-actions
         bordered
-          class="bg-red-1 text-red border-orange"
+        rounded
+        class="bg-red-1 text-red border-orange q-ma-md"
       >
         <q-icon name="mdi-information-outline" size="20px" /> แจ้งเตือน
         ยังไม่ได้บันทึกข้อมูล
       </q-banner>
+      <q-separator />
     </div>
 
     <form @submit.prevent="validateForm">
-        <div class="col-12">
+      <div class="col-12 row">
-          <q-card bordered>
+        <div class="col-sm-12 col-md-9 row no-wrap">
           <div class="col-12 row q-pa-md">
-              <div class="col-xs-12 col-sm-12 row q-col-gutter-md">
+            <div class="row q-col-gutter-md">
               <div class="col-xs-12 col-sm-4" id="respondentType">
                 <q-select
                   :class="inputEdit(isReadonly)"
@@ -882,27 +883,12 @@ onMounted(() => {
               </div>
             </div>
           </div>
-          </q-card>
+          <div class="col-12 row"><q-separator vertical /></div>
-        </div>
-
-        <q-separator />
-        <div class="row col-12 q-pa-sm" v-if="!isReadonly">
-          <q-space />
-          <q-btn
-            for="ButtonOnSubmit"
-            id="onSubmit"
-            color="secondary"
-            label="บันทึก"
-            type="submit"
-            ><q-tooltip>บันทึกข้อมูล</q-tooltip></q-btn
-          >
-        </div>
-      </form>
         </div> 
         
         <!-- อัพโหลดไฟล์ -->
         <div class="col-sm-12 col-md-3">
-      <q-card flat class="q-pa-md" bordered>
+          <div flat class="q-pa-md" >
             <div class="col-12 row q-col-gutter-md">
               <div class="row col-12">
                 <q-card
@@ -923,7 +909,7 @@ onMounted(() => {
                   >
                     <q-file
                       for="inputFiles"
-                  class="col-11"
+                      class="col-12"
                       outlined
                       dense
                       v-model="formData.documentFile"
@@ -937,9 +923,7 @@ onMounted(() => {
                       <template v-slot:prepend>
                         <q-icon name="attach_file" color="primary" />
                       </template>
-                </q-file>
+                      <template v-slot:after>
-
-                <div class="col-1 self-center" v-if="formData.documentFile">
                         <q-btn
                         size="14px"
                         flat
@@ -948,9 +932,11 @@ onMounted(() => {
                         color="add"
                         icon="mdi-upload"
                         @click="upLoadFileDoc()"
-                    ><q-tooltip>อัปโหลดไฟล์</q-tooltip></q-btn
+                        ><q-tooltip>อัปโหลดไฟล์</q-tooltip></q-btn>
-                  >
+                      </template>
-                </div>
+                    </q-file>
+
+                    <!-- <div class="col-1 self-center" v-if="formData.documentFile"></div> -->
                   </div>
 
                   <div v-if="fileList.length > 0" class="col-xs-12 q-pa-sm row">
@@ -996,10 +982,27 @@ onMounted(() => {
                 </q-card>
               </div>
             </div>
-      </q-card>
           </div>
         </div>
 
+        <div class="col-12 "><q-separator /></div>
+        <div class="row col-12 q-pa-sm" v-if="!isReadonly">
+          <q-space />
+          <q-btn
+            for="ButtonOnSubmit"
+            id="onSubmit"
+            color="secondary"
+            label="บันทึก"
+            type="submit"
+            ><q-tooltip>บันทึกข้อมูล</q-tooltip></q-btn
+          >
+        </div>
+      </div>
+    </form>
+
+   
+  </div>
+
   <!-- Popup ผู้ถูกร้องเรียน -->
   <DialogAddPersonal
     title="ผู้ถูกร้องเรียน"

src/modules/11_discipline/components/2_InvestigateFacts/AddPage.vue

@@ -27,6 +27,6 @@ async function onSubmit(){
       เพิ่มรายการสืบสวนข้อเท็จจริง
     </div>
 
-    <Form :on-submit="onSubmit" />
+    <q-card bordered><Form :on-submit="onSubmit" /></q-card>
   </div>
 </template>

src/modules/11_discipline/components/2_InvestigateFacts/EditPage.vue

@@ -405,7 +405,7 @@ watch(
       </div>
     </div>
 
-    <q-card flat class="col-12">
+    <q-card bordered flat class="col-12">
       <q-tabs
         v-model="store.tabMenu"
         dense

src/modules/11_discipline/components/2_InvestigateFacts/Form.vue

@@ -643,22 +643,23 @@ onMounted(async () => {
 </script>
 <template>
   <div class="row col-12 bg-white">
-    <div class="col-sm-12 col-md-9">
+    <div v-if="isSave" class=" col-12">
-      <div v-if="isSave" class="q-pa-sm q-gutter-sm">
       <q-banner
         inline-actions
         bordered
-          class="bg-red-1 text-red border-orange"
+        rounded
+        class="bg-red-1 text-red border-orange q-ma-md"
       >
         <q-icon name="mdi-information-outline" size="20px" /> แจ้งเตือน
         ยังไม่ได้บันทึกข้อมูล
       </q-banner>
+      <q-separator />
     </div>
-
     <form @submit.prevent="validateForm">
-        <div class="col-12">
+      <div class="col-12 row">
-          <q-card bordered>
+        <div class="col-sm-12 col-md-9 row no-wrap">
-            <div class="col-12 row q-pa-md q-col-gutter-md">
+          <div class="col-12 row q-pa-md">
+            <div class="row q-col-gutter-md">
               <div class="col-xs-12 row q-col-gutter-md">
                 <div class="col-xs-12 col-sm-3" id="respondentType">
                   <q-select
@@ -1365,28 +1366,13 @@ onMounted(async () => {
                   </div>
                 </q-card>
               </div>
-
-              <q-separator />
-              <div v-if="!isReadonly" class="row col-12 q-pa-sm">
-                <q-space />
-                <q-btn
-                  id="onSubmit"
-                  type="submit"
-                  label="บันทึก"
-                  color="secondary"
-                  ><q-tooltip>บันทึกข้อมูล</q-tooltip></q-btn
-                >
             </div>
           </div>
-          </q-card>
+          <div class="col-12 row"><q-separator vertical /></div> 
         </div>
-      </form>
-    </div>
-
-    <!-- อัพโหลดไฟล์ -->
         <div class="col-xs-12 col-sm-12 col-md-3">
-      <q-card flat bordered class="q-pa-md q-mb-sm">
+          <div class="q-col-gutter-md row q-pa-md">
-        <div class="col-xs-12 q-mb-sm">
+            <div class="col-xs-12">
               <q-card bordered class="row col-12" style="border: 1px solid #d6dee1">
                 <div class="col-12 text-weight-medium bg-grey-1 q-py-sm q-px-md">
                   อัปโหลดไฟล์เอกสารที่เกี่ยวข้องกับการสืบสวน
@@ -1409,8 +1395,7 @@ onMounted(async () => {
                     <template v-slot:prepend>
                       <q-icon name="attach_file" color="primary" />
                     </template>
-              </q-file>
+                    <template v-slot:after>
-              <div class="col-1 self-center">
                         <q-btn
                           v-if="formData.evidenceFiles"
                           size="14px"
@@ -1420,9 +1405,9 @@ onMounted(async () => {
                           color="add"
                           icon="mdi-upload"
                           @click="uploadFileRelevant"
-                  ><q-tooltip>อัปโหลดเอกสาร</q-tooltip></q-btn
+                          ><q-tooltip>อัปโหลดเอกสาร</q-tooltip></q-btn>
-                >
+                    </template>
-              </div>
+                  </q-file>
                 </div>
 
                 <div
@@ -1570,9 +1555,24 @@ onMounted(async () => {
                 </div>
               </q-card>
             </div>
-      </q-card>
           </div>
         </div>
+        <div class="col-12 "><q-separator /></div>
+        <div class="row col-12 q-pa-sm" v-if="!isReadonly">
+          <q-space />
+          <q-btn
+            id="onSubmit"
+            type="submit"
+            label="บันทึก"
+            color="secondary"
+            ><q-tooltip>บันทึกข้อมูล</q-tooltip></q-btn
+          >
+        </div>
+      </div>
+    </form>
+  </div>
+
+    <!-- อัพโหลดไฟล์ -->
     
   <DialogDuty
     :modal="modalEditDirector"

src/modules/11_discipline/components/2_InvestigateFacts/MainPage.vue

@@ -109,7 +109,7 @@ onMounted(async () => {
   </div>
   <q-card flat bordered class="col-12 q-mt-sm q-pa-md">
     <div class="row col-12 q-col-gutter-sm q-mb-sm">
-      <div class="col-2">
+      <div class="col-xs-12 col-sm-4 col-md-3">
         <q-select
           v-model="statusFilter"
           label="สถานะ"

src/modules/11_discipline/components/3_InvestigateDisciplinary/AddPage.vue

@@ -25,6 +25,6 @@ const onSubmit = async () => {
       เพิ่มการสอบสวนความผิดทางวินัย
     </div>
 
-    <Form :on-submit="onSubmit" />
+    <q-card bordered><Form :on-submit="onSubmit" /></q-card>
   </div>
 </template>

src/modules/11_discipline/components/3_InvestigateDisciplinary/EditPage.vue

@@ -459,7 +459,7 @@ onMounted(async () => {
       </div>
     </div>
 
-    <q-card flat class="col-12">
+    <q-card bordered flat class="col-12">
       <q-tabs
         v-model="store.tabMenu"
         dense

src/modules/11_discipline/components/3_InvestigateDisciplinary/Form.vue

@@ -684,25 +684,26 @@ onMounted(async () => {
 </script>
 <template>
   <div class="row col-12 bg-white">
-    <div class="col-sm-12 col-md-9">
+    <div v-if="isSave" class=" col-12">
-      <div v-if="isSave" class="q-pa-sm q-gutter-sm">
       <q-banner
         inline-actions
         bordered
-          class="bg-red-1 text-red border-orange"
+        rounded
+        class="bg-red-1 text-red border-orange q-ma-md"
       >
         <q-icon name="mdi-information-outline" size="20px" /> แจ้งเตือน
         ยังไม่ได้บันทึกข้อมูล
       </q-banner>
+      <q-separator />
     </div>
-
     <form @submit.prevent="validateForm">
-        <div class="col-12">
+      <div class="col-12 row">
-          <q-card bordered>
+        <div class="col-sm-12 col-md-9 row no-wrap">
+          
           <div class="col-12 row q-pa-md">
-              <div class="col-12 row q-col-gutter-md">
+            <div class="row q-col-gutter-md">
               <div class="row col-12 q-col-gutter-x-md">
-                  <div class="col-xs-12 col-sm-3">
+                <div class="col-xs-12 col-sm-4">
                   <q-select
                     :class="inputEdit(isReadonly)"
                     :readonly="isReadonly"
@@ -738,7 +739,7 @@ onMounted(async () => {
                 </div>
 
                 <div
-                    class="col-xs-12 col-sm-3"
+                  class="col-xs-12 col-sm-4"
                   v-if="formData.respondentType === 'ORGANIZATION'"
                   id="organizationId"
                 >
@@ -1011,8 +1012,129 @@ onMounted(async () => {
                     </q-input>
                   </template>
                 </datepicker>
-                </div>
+                <datepicker
+                  :readonly="isReadonly"
+                  menu-class-name="modalfix"
+                  for="#dateEvident"
+                  v-model="formData.disciplinaryDateEvident"
+                  :locale="'th'"
+                  autoApply
+                  class="col-xs-12 col-sm-3"
+                  borderless
+                  :enableTimePicker="false"
+                  week-start="0"
+                  @update:model-value="changeFormData()"
+                >
+                  <template #year="{ year }">
+                    {{ year + 543 }}
+                  </template>
+                  <template #year-overlay-value="{ value }">
+                    {{ parseInt(value + 543) }}
+                  </template>
+                  <template #trigger>
+                    <q-input
+                      :readonly="isReadonly"
+                      ref="disciplinaryDateEvidentRef"
+                      outlined
+                      dense
+                      hide-bottom-space
+                      :class="inputEdit(isReadonly)"
+                      :model-value="
+                        formData.disciplinaryDateEvident != null
+                          ? date2Thai(formData.disciplinaryDateEvident)
+                          : null
+                      "
+                      :label="`${'วันที่สรุปพยานหลักฐาน'}`"
+                    >
+                      <template v-slot:prepend>
+                        <q-icon
+                          name="event"
+                          class="cursor-pointer"
+                          color="primary"
+                        >
+                        </q-icon>
+                      </template>
+                      <template
+                        v-if="
+                          formData.disciplinaryDateEvident &&
+                          isReadonly === false
+                        "
+                        v-slot:append
+                      >
+                        <q-icon
+                          name="cancel"
+                          @click.stop.prevent="
+                            formData.disciplinaryDateEvident = null
+                          "
+                          class="cursor-pointer"
+                        />
+                      </template>
+                    </q-input>
+                  </template>
+                </datepicker>
               
+                <datepicker
+                  :readonly="isReadonly"
+                  menu-class-name="modalfix"
+                  for="#dateResult"
+                  v-model="formData.disciplinaryDateResult"
+                  :locale="'th'"
+                  autoApply
+                  class="col-xs-12 col-sm-3"
+                  borderless
+                  :enableTimePicker="false"
+                  week-start="0"
+                  @update:model-value="changeFormData()"
+                >
+                  <template #year="{ year }">
+                    {{ year + 543 }}
+                  </template>
+                  <template #year-overlay-value="{ value }">
+                    {{ parseInt(value + 543) }}
+                  </template>
+
+                  <template #trigger>
+                    <q-input
+                      :readonly="isReadonly"
+                      ref="disciplinaryDateResultRef"
+                      outlined
+                      :class="inputEdit(isReadonly)"
+                      dense
+                      hide-bottom-space
+                      :model-value="
+                        formData.disciplinaryDateResult != null
+                          ? date2Thai(formData.disciplinaryDateResult)
+                          : null
+                      "
+                      :label="`${'วันที่รายงานผลการสอบสวน'}`"
+                    >
+                      <template v-slot:prepend>
+                        <q-icon
+                          name="event"
+                          class="cursor-pointer"
+                          color="primary"
+                        >
+                        </q-icon>
+                      </template>
+                      <template
+                        v-if="
+                          formData.disciplinaryDateResult &&
+                          isReadonly === false
+                        "
+                        v-slot:append
+                      >
+                        <q-icon
+                          name="cancel"
+                          @click.stop.prevent="
+                            formData.disciplinaryDateResult = null
+                          "
+                          class="cursor-pointer"
+                        />
+                      </template>
+                    </q-input>
+                  </template>
+                </datepicker>
+              </div>
               <div class="row col-12">
                 <q-card
                   bordered
@@ -1291,129 +1413,6 @@ onMounted(async () => {
                 </q-card>
               </div>
 
-                <datepicker
-                  :readonly="isReadonly"
-                  menu-class-name="modalfix"
-                  for="#dateEvident"
-                  v-model="formData.disciplinaryDateEvident"
-                  :locale="'th'"
-                  autoApply
-                  class="col-xs-12 col-sm-3"
-                  borderless
-                  :enableTimePicker="false"
-                  week-start="0"
-                  @update:model-value="changeFormData()"
-                >
-                  <template #year="{ year }">
-                    {{ year + 543 }}
-                  </template>
-                  <template #year-overlay-value="{ value }">
-                    {{ parseInt(value + 543) }}
-                  </template>
-                  <template #trigger>
-                    <q-input
-                      :readonly="isReadonly"
-                      ref="disciplinaryDateEvidentRef"
-                      outlined
-                      dense
-                      hide-bottom-space
-                      :class="inputEdit(isReadonly)"
-                      :model-value="
-                        formData.disciplinaryDateEvident != null
-                          ? date2Thai(formData.disciplinaryDateEvident)
-                          : null
-                      "
-                      :label="`${'วันที่สรุปพยานหลักฐาน'}`"
-                    >
-                      <template v-slot:prepend>
-                        <q-icon
-                          name="event"
-                          class="cursor-pointer"
-                          color="primary"
-                        >
-                        </q-icon>
-                      </template>
-                      <template
-                        v-if="
-                          formData.disciplinaryDateEvident &&
-                          isReadonly === false
-                        "
-                        v-slot:append
-                      >
-                        <q-icon
-                          name="cancel"
-                          @click.stop.prevent="
-                            formData.disciplinaryDateEvident = null
-                          "
-                          class="cursor-pointer"
-                        />
-                      </template>
-                    </q-input>
-                  </template>
-                </datepicker>
-
-                <datepicker
-                  :readonly="isReadonly"
-                  menu-class-name="modalfix"
-                  for="#dateResult"
-                  v-model="formData.disciplinaryDateResult"
-                  :locale="'th'"
-                  autoApply
-                  class="col-xs-12 col-sm-3"
-                  borderless
-                  :enableTimePicker="false"
-                  week-start="0"
-                  @update:model-value="changeFormData()"
-                >
-                  <template #year="{ year }">
-                    {{ year + 543 }}
-                  </template>
-                  <template #year-overlay-value="{ value }">
-                    {{ parseInt(value + 543) }}
-                  </template>
-
-                  <template #trigger>
-                    <q-input
-                      :readonly="isReadonly"
-                      ref="disciplinaryDateResultRef"
-                      outlined
-                      :class="inputEdit(isReadonly)"
-                      dense
-                      hide-bottom-space
-                      :model-value="
-                        formData.disciplinaryDateResult != null
-                          ? date2Thai(formData.disciplinaryDateResult)
-                          : null
-                      "
-                      :label="`${'วันที่รายงานผลการสอบสวน'}`"
-                    >
-                      <template v-slot:prepend>
-                        <q-icon
-                          name="event"
-                          class="cursor-pointer"
-                          color="primary"
-                        >
-                        </q-icon>
-                      </template>
-                      <template
-                        v-if="
-                          formData.disciplinaryDateResult &&
-                          isReadonly === false
-                        "
-                        v-slot:append
-                      >
-                        <q-icon
-                          name="cancel"
-                          @click.stop.prevent="
-                            formData.disciplinaryDateResult = null
-                          "
-                          class="cursor-pointer"
-                        />
-                      </template>
-                    </q-input>
-                  </template>
-                </datepicker>
-
               <div class="row col-12">
                 <q-card
                   bordered
@@ -1752,25 +1751,11 @@ onMounted(async () => {
               </div>
             </div>
           </div>
-            <q-separator />
+          <div class="col-12 row"><q-separator vertical /></div> 
-            <div v-if="!isReadonly" class="row col-12 q-pa-sm">
-              <q-space />
-              <q-btn
-                for="ButtonOnSubmit"
-                id="formSubmit"
-                color="secondary"
-                label="บันทึก"
-                type="submit"
-                ><q-tooltip>บับทึกข้อมูล</q-tooltip></q-btn
-              >
-            </div>
-          </q-card>
-        </div>
-      </form>
         </div>
 
         <!-- อัพโหลดไฟล์ -->
-    <div class="col-sm-12 col-md-3">
+        <div class="col-sm-12 col-md-3 q-col-gutter-md q-pa-md">
           <!-- ยังไม่มี api  -->
           <UploadFile
             title="อัปโหลดไฟล์เอกสารที่เกี่ยวข้องกับการสอบสวน"
@@ -1826,6 +1811,20 @@ onMounted(async () => {
             :return-count="returnCount"
           />
         </div>
+        <div class="col-12 "><q-separator /></div>
+        <div v-if="!isReadonly" class="row col-12 q-pa-sm">
+          <q-space />
+          <q-btn
+            for="ButtonOnSubmit"
+            id="formSubmit"
+            color="secondary"
+            label="บันทึก"
+            type="submit"
+            ><q-tooltip>บับทึกข้อมูล</q-tooltip></q-btn
+          >
+        </div>
+      </div>
+    </form>
   </div>
 
   <DialogDuty

src/modules/11_discipline/components/3_InvestigateDisciplinary/Table.vue

@@ -128,7 +128,7 @@ function filterFn() {
 
 <template>
   <div class="q-pb-sm row q-col-gutter-sm">
-    <div class="col-2">
+    <div class="col-xs-12 col-sm-4 col-md-3">
       <q-select
         v-model="statusFilter"
         label="สถานะ"

src/modules/11_discipline/components/4_Result/EditPage.vue

@@ -293,7 +293,7 @@ onMounted(async () => {
         /> -->
       </div>
     </div>
-    <q-card flat class="col-12">
+    <q-card bordered flat class="col-12">
       <q-tabs
         v-model="store.tabMenu"
         dense

src/modules/11_discipline/components/4_Result/Form.vue

@@ -260,22 +260,28 @@ function updatemodalPersonal(modal: boolean) {
 </script>
 <template>
   <div class="row q-col-gutter-sm">
-    <div class="col-sm-12 col-md-9">
+    <div v-if="isSave" class=" col-12">
-      <div v-if="isSave" class="q-pa-sm q-gutter-sm">
       <q-banner
         inline-actions
         bordered
-          class="bg-red-1 text-red border-orange"
+        rounded
+        class="bg-red-1 text-red border-orange q-ma-md"
       >
         <q-icon name="mdi-information-outline" size="20px" /> แจ้งเตือน
         ยังไม่ได้บันทึกข้อมูล
       </q-banner>
+      <q-separator />
     </div>
+    
+      
       <form @submit.prevent="validateForm">
         <q-card bordered>
-          <div class="q-pa-md">
+          <div class="col-12 row">
-            <div class="row col-12 q-gutter-sm">
+            <div class="col-sm-12 col-md-9 row no-wrap">
-              <div class="col-xs-12 col-sm-2">
+              <div class="row col-12 q-pa-md">
+                <div class="row q-col-gutter-md">
+                  
+                  <div class="col-xs-12 col-sm-4">
                     <q-select
                       readonly
                       for="SelectrespondentType"
@@ -501,23 +507,11 @@ function updatemodalPersonal(modal: boolean) {
                   </div>
                 </div>
               </div>
-          <q-separator />
+              <div class="col-12 row"><q-separator vertical /></div> 
-          <div class="row col-12 q-pa-sm">
-            <q-space />
-            <q-btn
-              for="ButtonOnSubmit"
-              id="formSubmit"
-              color="secondary"
-              label="บันทึก"
-              type="submit"
-              ><q-tooltip>บับทึกข้อมูล</q-tooltip></q-btn
-            >
-          </div>
-        </q-card>
-      </form>
             </div>
+
             <!-- อัพโหลดไฟล์ -->
-    <div class="col-sm-12 col-md-3">
+            <div class="col-sm-12 col-md-3 q-pa-md">
               <q-card bordered class="row col-12" style="border: 1px solid #d6dee1">
                 <div class="col-12 text-weight-medium bg-grey-1 q-py-sm q-px-md">
                   อัปโหลดไฟล์เอกสารหลักฐาน
@@ -526,7 +520,7 @@ function updatemodalPersonal(modal: boolean) {
                 <div class="col-12 q-pa-sm row">
                   <q-file
                     for="inputFiles"
-            class="col-11"
+                    class="col-12"
                     outlined
                     dense
                     v-model="formData.file"
@@ -539,9 +533,7 @@ function updatemodalPersonal(modal: boolean) {
                     <template v-slot:prepend>
                       <q-icon name="attach_file" color="primary" />
                     </template>
-          </q-file>
+                    <template v-slot:after>
-
-          <div class="col-1 self-center text-center">
                       <q-btn
                       v-if="formData.file"
                       size="14px"
@@ -551,9 +543,9 @@ function updatemodalPersonal(modal: boolean) {
                       color="add"
                       icon="mdi-upload"
                       @click="uploadFile"
-              ><q-tooltip>อัปโหลดไฟล์</q-tooltip></q-btn
+                      ><q-tooltip>อัปโหลดไฟล์</q-tooltip></q-btn>
-            >
+                    </template>
-          </div>
+                  </q-file>
                 </div>
                 <div
                   v-if="formData.disciplineDisciplinary_DocResults.length > 0"
@@ -598,6 +590,22 @@ function updatemodalPersonal(modal: boolean) {
                 </div>
               </q-card>
             </div>
+          
+            <div class="col-12 "><q-separator /></div>
+            <div class="row col-12 q-pa-sm">
+              <q-space />
+              <q-btn
+                for="ButtonOnSubmit"
+                id="formSubmit"
+                color="secondary"
+                label="บันทึก"
+                type="submit"
+                ><q-tooltip>บับทึกข้อมูล</q-tooltip></q-btn
+              >
+            </div>
+          </div>
+        </q-card>
+      </form>
     </div>
     
   <PopupPersonal

src/modules/11_discipline/components/4_Result/Table.vue

@@ -112,7 +112,7 @@ function filterFn() {
 <template>
   <div class="q-pb-sm row q-col-gutter-sm">
     <div class="q-gutter-sm" v-if="nornmalData == true"></div>
-    <div class="col-2">
+    <div class="col-xs-12 col-sm-4 col-md-3">
       <q-select
         v-model="statusFilter"
         label="สถานะ"

src/modules/11_discipline/components/6_BasicInformation/Director/Form.vue

@@ -292,10 +292,10 @@ function updatemodalPersonal(modal: boolean) {
 <template>
   <form @submit.prevent.stop="onValidate">
     <q-card bordered>
-      <div class="col-12 q-pa-md">
+      <div class="col-12 row q-pa-md">
         <div class="row col-12 q-col-gutter-md">
-          <div class="col-12 q-gutter-y-sm" v-if="data === null">
+          <div class="col-12" v-if="data === null">
-            <div class="row q-col-gutter-md items-start">
+            <div class="row q-col-gutter-sm">
               <div class="col-12 col-sm-6 col-md-3">
                 <q-select
                   label="ค้นหาจาก"
@@ -311,7 +311,7 @@ function updatemodalPersonal(modal: boolean) {
                 />
               </div>
 
-              <div class="col-12 col-sm-6 col-md-6">
+              <div class="col-12 col-sm-6 col-md-9">
                 <q-input
                   ref="searchRef"
                   v-model="search"
@@ -321,22 +321,22 @@ function updatemodalPersonal(modal: boolean) {
                   dense
                   label="คำค้น"
                   :rules="[(val) => !!val || `กรุณากรอกคำค้น`]"
-                />
+                >
-              </div>
+                <template v-slot:after>
-
-              <div class="col-12 col-sm-6 col-md-3">
                   <q-btn
                     color="primary"
                     icon="search"
                     label="ค้นหา"
-                  class="full-width q-pa-sm"
+                    class="full-width q-py-sm q-px-md"
                     @click="searchInput()"
                   >
                   </q-btn>
+                </template>
+                </q-input>
               </div>
             </div>
 
-            <div class="col-12">
+            <div class="col-12 q-pt-sm">
               <d-table
                 ref="table"
                 :columns="columnsRespondent"
@@ -398,6 +398,7 @@ function updatemodalPersonal(modal: boolean) {
               </d-table>
             </div>
           </div>
+          <!-- <div class="col-12"><q-separator /></div> -->
 
           <div class="col-3">
             <q-input

src/modules/11_discipline/components/7_ListSuspend/DialogSendToCommand.vue

@@ -168,8 +168,8 @@ onMounted(() => {
     <q-card style="width: 1200px; max-width: 80vw">
       <DialogHeader tittle="ส่งไปออกคำสั่ง" :close="closeModal" />
       <q-separator />
-      <q-card-section class="q-pt-none">
+      <q-card-section class="q-pa-md">
-        <div class="row justify-between">
+        <div class="row">
           <div class="col-5">
             <q-toolbar style="padding: 0">
               <q-select
@@ -194,6 +194,7 @@ onMounted(() => {
               </q-select>
             </q-toolbar>
           </div>
+          <q-space />
 
           <div class="col-5">
             <q-toolbar style="padding: 0">
@@ -281,7 +282,7 @@ onMounted(() => {
           </template>
         </d-table>
       </q-card-section>
-
+      <q-separator />
       <q-card-actions align="right" class="bg-white text-teal">
         <q-btn
           label="ส่งไปออกคำสั่ง"

src/modules/11_discipline/components/8_AppealComplain/Form.vue

@@ -339,7 +339,7 @@ onMounted(() => {
 </script>
 <template>
   <div class="row q-col-gutter-xs">
-    <div class="col-sm-12 col-md-9">
+    <div class="col-12">
       <form @submit.prevent="validateForm">
         <q-card bordered>
           <div class="q-pa-md">
@@ -690,6 +690,7 @@ onMounted(() => {
 </template>
 
 <style lang="scss">
+
 .icon-color {
   color: #4154b3;
 }

src/modules/11_discipline/components/8_AppealComplain/MainPage.vue

@@ -276,7 +276,7 @@ onMounted(async () => {
     รายการอุทธรณ์/ร้องทุกข์
   </div>
   <q-card flat bordered class="col-12 q-mt-sm q-pa-md">
-    <div class="row q-mb-sm">
+    <div class="row q-mb-sm q-col-gutter-sm">
         <div>
           <q-btn
             id="addComplaints"
@@ -290,8 +290,48 @@ onMounted(async () => {
             ><q-tooltip>เพิ่มการอุทธรณ์/ร้องทุกข์</q-tooltip></q-btn
           >
         </div>
+        <q-space />
+        <q-input
+          for="#search"
+          class="col-xs-12 col-sm-3 col-md-2"
+          standout
+          dense
+          v-model="filterKeyword"
+          ref="filterRef"
+          outlined
+          placeholder="ค้นหา"
+          @keydown.enter.prevent="filterFn"
+        >
+          <template v-slot:append>
+            <q-icon
+              v-if="filterKeyword !== ''"
+              name="clear"
+              class="cursor-pointer"
+              @click="resetFilter"
+            />
+          </template>
+        </q-input>
+
+        <q-select
+          id="visibleColumns"
+          for="visibleColumns"
+          v-model="dataStore.visibleColumns"
+          multiple
+          outlined
+          dense
+          options-dense
+          :display-value="$q.lang.table.columns"
+          emit-value
+          map-options
+          :options="dataStore.columns"
+          option-value="name"
+          options-cover
+          class="col-xs-12 col-sm-3 col-md-2"
+        />
     </div>
-    <div class="row col-12 q-col-gutter-sm q-mb-sm">
+    <div class="col-12 row q-mb-sm">
+      <q-card bordered class="col-12 filter-card q-pa-sm">
+        <div class="row col-12 q-col-gutter-sm">
           <div class="col-2">
             <datepicker
               menu-class-name="modalfix"
@@ -336,7 +376,6 @@ onMounted(async () => {
               </template>
             </datepicker>
           </div>
-
           <div class="col-2">
             <q-select
               v-model="formData.type"
@@ -365,45 +404,9 @@ onMounted(async () => {
               @update:model-value="dataUpdate"
             />
           </div>
-      <q-space />
           
-      <q-input
+        </div>
-        for="#search"
+      </q-card>
-        class="col-xs-12 col-sm-3 col-md-2"
-        standout
-        dense
-        v-model="filterKeyword"
-        ref="filterRef"
-        outlined
-        placeholder="ค้นหา"
-        @keydown.enter.prevent="filterFn"
-      >
-        <template v-slot:append>
-          <q-icon
-            v-if="filterKeyword !== ''"
-            name="clear"
-            class="cursor-pointer"
-            @click="resetFilter"
-          />
-        </template>
-      </q-input>
-
-      <q-select
-        id="visibleColumns"
-        for="visibleColumns"
-        v-model="dataStore.visibleColumns"
-        multiple
-        outlined
-        dense
-        options-dense
-        :display-value="$q.lang.table.columns"
-        emit-value
-        map-options
-        :options="dataStore.columns"
-        option-value="name"
-        options-cover
-        class="col-xs-12 col-sm-3 col-md-2"
-      />
     </div>
 
     <div class="col-12">
@@ -481,4 +484,8 @@ onMounted(async () => {
   <DialogStatus :modal="modalStatusEdit" :data="dataRow" :close="close" />
 </template>
 
-<style scoped></style>
+<style scoped>
+.filter-card {
+  background-color: #f1f1f1b0;
+}
+</style>

src/modules/11_discipline/components/UploadFile.vue

@@ -127,16 +127,16 @@ function downloadFile(link: string) {
 </script>
 
 <template>
-  <q-card flat class="q-pa-md" bordered>
+  <div>
     <q-card bordered style="border: 1px solid #d6dee1">
       <div class="text-weight-medium bg-grey-1 q-py-sm q-px-md">
         {{ title }}
       </div>
       <div class="col-12"><q-separator /></div>
       <div v-if="!isReadonly" class="row">
-        <div class="col-12 q-pa-sm row">
+        <div class="col-12 q-px-sm q-pt-sm row">
           <q-file
-            class="col-11"
+            class="col-12"
             outlined
             dense
             ref="fileRef"
@@ -150,9 +150,7 @@ function downloadFile(link: string) {
             <template v-slot:prepend>
               <q-icon name="attach_file" />
             </template>
-          </q-file>
+            <template v-slot:after>
-
-          <div class="col-1 self-center">
               <q-btn
                 v-if="file"
                 size="14px"
@@ -164,7 +162,8 @@ function downloadFile(link: string) {
                 @click="uploadFile()"
                 ><q-tooltip>อัปโหลดไฟล์</q-tooltip></q-btn
               >
-          </div>
+            </template>
+          </q-file>
         </div>
       </div>
 
@@ -212,9 +211,9 @@ function downloadFile(link: string) {
         </q-list>
       </div>
 
-      <div class="col-12 q-ma-xs" v-if="props.files.length == 0">
+      <div class="col-12  q-pa-sm" v-if="props.files.length == 0">
-        <q-card class="q-pa-md" bordered> ไม่มีรายการเอกสาร </q-card>
+        <q-card class="q-py-sm q-px-md" bordered> ไม่มีรายการเอกสาร </q-card>
       </div>
     </q-card>
-  </q-card>
+  </div>
 </template>

src/views/Dashboard.vue

@@ -164,19 +164,17 @@ const thaiOptions: Intl.DateTimeFormatOptions = {
         <div
           v-if="totalInbox != 0"
           ref="scrollTargetRef"
-          class="q-pa-md"
           style="max-height: 90%; overflow: auto"
         >
           <q-infinite-scroll
             @load="onLoad"
             :offset="250"
-            class="q-pa-md"
+            class="q-pa-sm"
             :scroll-target="scrollTargetRef"
           >
             <q-list
               v-for="(contact, index) in inboxList"
               :key="contact.no"
-              class="q-pt-sm"
             >
               <q-item
                 clickable