ปรับ ui ตาราง,Layout ระบบ วินัย เพิ่มเติม

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

@@ -62,53 +62,55 @@ function redirectToPageadd() {
 
 <template>
   <div class="toptitle text-dark col-12 row items-center">เรื่องร้องเรียน</div>
-  <div class="col-12 q-mt-sm">
-    <q-card flat bordered>
-      <div class="q-pa-md">
-        <q-toolbar style="padding: 0" class="q-gutter-sm q-mb-md">
-          <q-btn
-            id="addComplaints"
-            flat
-            dense
-            round
-            color="primary"
-            icon="mdi-plus"
-            @click="redirectToPageadd()"
-            ><q-tooltip>เพิ่มเรื่องร้องเรียน </q-tooltip></q-btn
-          >
+  <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>
+            <q-btn
+              id="addComplaints"
+              size="12px"
+              flat
+              round
+              color="primary"
+              icon="mdi-plus"
+              @click="redirectToPageadd()"
+              ><q-tooltip>เพิ่มเรื่องร้องเรียน </q-tooltip></q-btn
+            >
+          </div>
           <q-space />
-          <div class="col-2">
-            <q-input
-              id="filterTable"
-              for="filterTable"
-              dense
-              outlined
-              v-model="filterTable"
-              label="ค้นหา"
-            />
-          </div>
-          <div class="col-2">
-            <q-select
-              id="visibleColumns"
-              for="visibleColumns"
-              v-model="complainstStore.visibleColumns"
-              multiple
-              outlined
-              dense
-              options-dense
-              :display-value="$q.lang.table.columns"
-              emit-value
-              map-options
-              :options="complainstStore.columns"
-              option-value="name"
-              options-cover
-            />
-          </div>
-        </q-toolbar>
+          <q-input
+            class="col-xs-12 col-sm-3 col-md-2"
+            id="filterTable"
+            for="filterTable"
+            dense
+            outlined
+            v-model="filterTable"
+            label="ค้นหา"
+          >
+          <template v-slot:append>
+            <q-icon name="search" />
+          </template>
+          </q-input>
+          <q-select
+            id="visibleColumns"
+            for="visibleColumns"
+            v-model="complainstStore.visibleColumns"
+            multiple
+            outlined
+            dense
+            options-dense
+            :display-value="$q.lang.table.columns"
+            emit-value
+            map-options
+            :options="complainstStore.columns"
+            option-value="name"
+            options-cover
+            class="col-xs-12 col-sm-3 col-md-2"
+          />
+      </div>
+      <div class="col-12">
         <TableComplaint :filterTable="filterTable" />
       </div>
-    </q-card>
-  </div>
+  </q-card>
 </template>
 
 <style scoped></style>