fix layout

src/modules/08_registryEmployee/components/EditEmployee/Employment.vue

@@ -311,71 +311,29 @@ const paginationHis = ref({
   <q-card flat bordered class="col-12 q-px-lg q-py-md">
     <div class="flex items-center">
       <div class="flex items-center">
-        <q-icon
+        <q-icon name="mdi-clipboard" size="1.5em" color="grey-5" class="q-mr-md" />
-          name="mdi-clipboard"
-          size="1.5em"
-          color="grey-5"
-          class="q-mr-md"
-        />
 
         <div class="text-bold text-subtitle2 col-12 row items-center">
           ข้อมูลการจ้าง
         </div>
       </div>
       <div class="q-gutter-sm q-mx-sm">
-        <q-btn
+        <q-btn size="12px" flat round color="primary" @click="onClickAdd" icon="mdi-plus">
-          size="12px"
-          flat
-          round
-          color="primary"
-          @click="onClickAdd"
-          icon="mdi-plus"
-        >
           <q-tooltip>เพิ่มข้อมูลการจ้าง</q-tooltip>
         </q-btn>
       </div>
 
       <q-space />
       <div class="q-gutter-sm" style="display: flex">
-        <q-input
+        <q-input outlined dense v-model="filter" label="ค้นหา" style="min-width: 150px" />
-          outlined
-          dense
-          v-model="filter"
-          label="ค้นหา"
-          style="min-width: 150px"
-        />
 
-        <q-select
+        <q-select v-model="visibleColumns" multiple outlined dense options-dense :display-value="$q.lang.table.columns"
-          v-model="visibleColumns"
+          emit-value map-options :options="columns" option-value="name" options-cover style="min-width: 150px" />
-          multiple
-          outlined
-          dense
-          options-dense
-          :display-value="$q.lang.table.columns"
-          emit-value
-          map-options
-          :options="columns"
-          option-value="name"
-          options-cover
-          style="min-width: 150px"
-        />
       </div>
     </div>
     <div class="q-mt-sm">
-      <d-table
+      <d-table flat bordered id="table" ref="table" :columns="columns" :rows="rows" :filter="filter"
-        flat
+        row-key="dateEmployment" :paging="true" dense :visible-columns="visibleColumns" v-model:pagination="pagination">
-        bordered
-        id="table"
-        ref="table"
-        :columns="columns"
-        :rows="rows"
-        :filter="filter"
-        row-key="dateEmployment"
-        :paging="true"
-        dense
-        :visible-columns="visibleColumns"
-        v-model:pagination="pagination"
-      >
         <template v-slot:header="props">
           <q-tr :props="props">
             <q-th v-for="col in props.cols" :key="col.name" :props="props">
@@ -394,38 +352,16 @@ const paginationHis = ref({
               </div>
             </q-td>
             <q-td>
-              <q-btn
+              <q-btn dense flat round color="primary" icon="mdi-pencil" @click="clickEdit(props.row, 'edit')">
-                dense
-                flat
-                round
-                color="primary"
-                icon="mdi-pencil"
-                @click="clickEdit(props.row, 'edit')"
-              >
                 <q-tooltip>แก้ไขข้อมูล</q-tooltip>
               </q-btn>
             </q-td>
             <q-td>
-              <q-btn
+              <q-btn dense flat round color="red" icon="mdi-delete" @click="cilckDelete(props.row.id)">
-                dense
+                <q-tooltip>ลบข้อมูล</q-tooltip></q-btn>
-                flat
-                round
-                color="red"
-                icon="mdi-delete"
-                @click="cilckDelete(props.row.id)"
-              >
-                <q-tooltip>ลบข้อมูล</q-tooltip></q-btn
-              >
             </q-td>
             <q-td>
-              <q-btn
+              <q-btn dense flat round color="info" @click="openPopupHistory(props.row.id)" icon="mdi-history">
-                dense
-                flat
-                round
-                color="info"
-                @click="openPopupHistory(props.row.id)"
-                icon="mdi-history"
-              >
                 <q-tooltip>ประวัติข้อมูลการจ้าง </q-tooltip>
               </q-btn>
             </q-td>
@@ -444,32 +380,17 @@ const paginationHis = ref({
           </span>
           <span style="margin-right: 0" v-else> เพิ่มข้อมูลการจ้าง </span>
         </q-toolbar-title>
-        <q-btn
+        <q-btn for="closeDialog" icon="close" unelevated round dense style="color: #eb0505; background-color: #ffdede"
-          for="closeDialog"
+          @click="colsePopup" />
-          icon="close"
-          unelevated
-          round
-          dense
-          style="color: #eb0505; background-color: #ffdede"
-          @click="colsePopup"
-        />
       </q-toolbar>
+      <q-separator />
       <form @submit.prevent="validateForm">
         <q-card-section class="q-pt-none">
           <div class="col-12 row q-pa-md">
-            <div
+            <div class="col-xs-12 col-sm-12 row q-col-gutter-x-md q-col-gutter-y-xs">
-              class="col-xs-12 col-sm-12 row q-col-gutter-x-md q-col-gutter-y-xs"
-            >
               <div class="col-xs-12 col-sm-6">
-                <datepicker
+                <datepicker menu-class-name="modalfix" v-model="formData.dateEmployment" :locale="'th'" autoApply
-                  menu-class-name="modalfix"
+                  borderless :enableTimePicker="false" week-start="0">
-                  v-model="formData.dateEmployment"
-                  :locale="'th'"
-                  autoApply
-                  borderless
-                  :enableTimePicker="false"
-                  week-start="0"
-                >
                   <template #year="{ year }">
                     {{ year + 543 }}
                   </template>
@@ -477,27 +398,13 @@ const paginationHis = ref({
                     {{ parseInt(value + 543) }}
                   </template>
                   <template #trigger>
-                    <q-input
+                    <q-input for="inputdateEmployment" ref="dateEmploymentRef" outlined dense
-                      for="inputdateEmployment"
+                      class="full-width datepicker" :model-value="formData.dateEmployment != null
-                      ref="dateEmploymentRef"
-                      outlined
-                      dense
-                      class="full-width datepicker"
-                      :model-value="
-                        formData.dateEmployment != null
                           ? date2Thai(formData.dateEmployment)
                           : null
-                      "
+                        " label="วันที่จ้าง" :rules="[(val) => !!val || `${'กรุณาเลือกวันที่จ้าง'}`]" lazy-rules>
-                      label="วันที่จ้าง"
-                      :rules="[(val) => !!val || `${'กรุณาเลือกวันที่จ้าง'}`]"
-                      lazy-rules
-                    >
                       <template v-slot:prepend>
-                        <q-icon
+                        <q-icon name="event" class="cursor-pointer" style="color: var(--q-primary)">
-                          name="event"
-                          class="cursor-pointer"
-                          style="color: var(--q-primary)"
-                        >
                         </q-icon>
                       </template>
                     </q-input>
@@ -506,16 +413,9 @@ const paginationHis = ref({
               </div>
 
               <div class="col-xs-12 col-sm-6">
-                <q-input
+                <q-input for="inputOrderEmployment" ref="orderEmploymentRef" dense outlined
-                  for="inputOrderEmployment"
+                  v-model="formData.orderEmployment" label="คำสั่งจ้าง"
-                  ref="orderEmploymentRef"
+                  :rules="[(val) => !!val || `${'กรุณากรอกคำสั่งจ้าง'}`]" lazy-rules />
-                  dense
-                  outlined
-                  v-model="formData.orderEmployment"
-                  label="คำสั่งจ้าง"
-                  :rules="[(val) => !!val || `${'กรุณากรอกคำสั่งจ้าง'}`]"
-                  lazy-rules
-                />
               </div>
             </div>
           </div>
@@ -525,16 +425,8 @@ const paginationHis = ref({
         </q-card-section>
         <q-separator />
         <q-card-actions align="right" class="bg-white text-teal">
-          <q-btn
+          <q-btn for="ButtonOnSubmit" id="onSubmit" flat round color="secondary" icon="mdi-content-save-outline"
-            for="ButtonOnSubmit"
+            type="submit"><q-tooltip>บับทึกข้อมูล</q-tooltip></q-btn>
-            id="onSubmit"
-            flat
-            round
-            color="secondary"
-            icon="mdi-content-save-outline"
-            type="submit"
-            ><q-tooltip>บับทึกข้อมูล</q-tooltip></q-btn
-          >
         </q-card-actions>
       </form>
     </q-card>
@@ -546,15 +438,8 @@ const paginationHis = ref({
         <q-toolbar-title class="text-subtitle1 text-weight-bold">
           <span style="margin-right: 0"> ประวัติข้อมูลการจ้าง </span>
         </q-toolbar-title>
-        <q-btn
+        <q-btn for="closeDialog" icon="close" unelevated round dense style="color: #eb0505; background-color: #ffdede"
-          for="closeDialog"
+          @click="colsePopup" />
-          icon="close"
-          unelevated
-          round
-          dense
-          style="color: #eb0505; background-color: #ffdede"
-          @click="colsePopup"
-        />
       </q-toolbar>
       <q-separator />
 
@@ -562,44 +447,16 @@ const paginationHis = ref({
         <q-toolbar class="q-pa-none">
           <q-space />
           <div class="q-gutter-sm" style="display: flex">
-            <q-input
+            <q-input outlined dense v-model="filterHis" label="ค้นหา" style="min-width: 150px" />
-              outlined
-              dense
-              v-model="filterHis"
-              label="ค้นหา"
-              style="min-width: 150px"
-            />
 
-            <q-select
+            <q-select v-model="visibleColumnsHis" multiple outlined dense options-dense
-              v-model="visibleColumnsHis"
+              :display-value="$q.lang.table.columns" emit-value map-options :options="columnsHis" option-value="name"
-              multiple
+              options-cover style="min-width: 150px" />
-              outlined
-              dense
-              options-dense
-              :display-value="$q.lang.table.columns"
-              emit-value
-              map-options
-              :options="columnsHis"
-              option-value="name"
-              options-cover
-              style="min-width: 150px"
-            />
           </div>
         </q-toolbar>
-        <d-table
+        <d-table flat bordered id="table" ref="table" :columns="columnsHis" :rows="rowsHis" :filter="filterHis"
-          flat
+          row-key="dateEmployment" :paging="true" dense :visible-columns="visibleColumnsHis"
-          bordered
+          v-model:pagination="paginationHis">
-          id="table"
-          ref="table"
-          :columns="columnsHis"
-          :rows="rowsHis"
-          :filter="filterHis"
-          row-key="dateEmployment"
-          :paging="true"
-          dense
-          :visible-columns="visibleColumnsHis"
-          v-model:pagination="paginationHis"
-        >
           <template v-slot:header="props">
             <q-tr :props="props">
               <q-th v-for="col in props.cols" :key="col.name" :props="props">