ปรับ ui หน้า โครงสร้างอัตรากำลัง

src/modules/02_organizationalNew/components/tableTree.vue

@@ -317,7 +317,7 @@ function updatePagination(newPagination: NewPagination) {
           flat
           round
           dense
-          color="positive"
+          color="blue-10"
           icon="mdi-cursor-move"
           @click="onClickMovePos('', 'All')"
         >
@@ -325,7 +325,7 @@ function updatePagination(newPagination: NewPagination) {
         </q-btn>
       </div>
 
-      <q-btn flat round dense color="blue-10" icon="save_alt">
+      <q-btn flat round dense color="deep-purple" icon="save_alt">
         <q-menu>
           <q-list
             dense
@@ -361,7 +361,11 @@ function updatePagination(newPagination: NewPagination) {
             v-model="reqMaster.keyword"
             label="ค้นหา"
             @keydown.enter.prevent="props.filterKeyword(reqMaster.keyword)"
-          />
+          >
+            <template v-slot:append>
+              <q-icon name="search" color="grey-5" />
+            </template>
+          </q-input>
         </div>
       </div>
     </q-toolbar>
@@ -380,6 +384,7 @@ function updatePagination(newPagination: NewPagination) {
       dense
       :rows-per-page-options="[10, 25, 50, 100]"
       @update:pagination="updatePagination"
+      class="tableTb"
     >
       <template v-slot:header="props">
         <q-tr :props="props">
@@ -394,12 +399,13 @@ function updatePagination(newPagination: NewPagination) {
         <q-tr :props="props" class="cursor-pointer">
           <q-td>
             <q-btn
-              size="sm"
-              color="primary"
+              flat
+              size="12px"
+              color="grey-8"
               round
               dense
               @click="props.expand = !props.expand"
-              :icon="props.expand ? 'remove' : 'add'"
+              :icon="props.expand ? 'mdi-menu-up' : 'mdi-menu-down'"
             />
           </q-td>
           <q-td v-for="col in props.cols" :key="col.name" :props="props">
@@ -422,11 +428,12 @@ function updatePagination(newPagination: NewPagination) {
               icon="mdi-dots-vertical"
               class="q-pa-none q-ml-xs"
               color="grey-13"
+              size="12px"
             >
               <q-menu>
                 <q-list
                   dense
-                  style="min-width: 200px"
+                  style="min-width: 150px"
                   v-for="(item, index) in stroe.typeOrganizational === 'draft'
                     ? listMenu
                     : listMenu.filter(
@@ -451,10 +458,12 @@ function updatePagination(newPagination: NewPagination) {
                         : null
                     "
                   >
-                    <q-item-section avatar>
-                      <q-icon :color="item.color" :name="item.icon" />
+                    <q-item-section> 
+                      <div class="row items-center">
+                        <q-icon :color="item.color" size="17px" :name="item.icon" />
+                        <div class="q-pl-md">{{ item.label }}</div>
+                      </div>
                     </q-item-section>
-                    <q-item-section>{{ item.label }}</q-item-section>
                   </q-item>
                 </q-list>
               </q-menu>
@@ -463,25 +472,28 @@ function updatePagination(newPagination: NewPagination) {
         </q-tr>
 
         <q-tr v-show="props.expand" :props="props">
-          <q-td colspan="100%">
-            <div class="text-left q-pa-md">
+          <q-td colspan="100%" class="bg-grey-1">
+            <q-card flat bordered class="text-left q-ma-sm">
               <q-table
                 flat
                 :columns="columnsExpand"
                 :rows="props.row.positions"
+                table-class="text-grey-9"
                 row-key="id"
                 dense
                 hide-bottom
+                bordered
+                separator="vertical" 
                 class="custom-header-table-expand"
               >
                 <template v-slot:header="props">
-                  <q-tr :props="props">
+                  <q-tr :props="props" class=" bg-grey-2">
                     <q-th
                       v-for="col in props.cols"
                       :key="col.name"
                       :props="props"
                     >
-                      <span class="text-weight-medium">{{ col.label }}</span>
+                      <span class="q-px-sm text-body2 text-black">{{ col.label }}</span>
                     </q-th>
                   </q-tr>
                 </template>
@@ -491,19 +503,20 @@ function updatePagination(newPagination: NewPagination) {
                       v-for="col in props.cols"
                       :key="col.name"
                       :props="props"
+                      
                     >
-                      <div v-if="col.name == 'no'">
+                      <div v-if="col.name == 'no'" class=" text-body2 ">
                         {{ props.rowIndex + 1 }}
                       </div>
 
-                      <div v-else>
+                      <div v-else class=" text-body2">
                         {{ col.value }}
                       </div>
                     </q-td>
                   </q-tr>
                 </template>
               </q-table>
-            </div>
+            </q-card>
           </q-td>
         </q-tr>
       </template>
@@ -584,6 +597,12 @@ function updatePagination(newPagination: NewPagination) {
   }
   .q-table thead tr:first-child th {
     top: 0;
+    padding: 0px;
   }
+  
+}
+ .q-table th:last-child, .q-table td:last-child{
+  padding: 0px !important;
+  
 }
 </style>