ปรับ ui form

src/components/TableHistory.vue

@@ -110,6 +110,10 @@ function classStatus(status: string) {
       break;
   }
 }
+const pagination = ref({
+  page: 1,
+  rowsPerPage: 10,
+});
 </script>
 <template>
   <q-table
@@ -122,6 +126,7 @@ function classStatus(status: string) {
     :virtual-scroll-sticky-size-start="48"
     :style="$q.screen.gt.xs ? 'max-height: 64vh' : ''"
     :grid="$q.screen.gt.xs ? false : true"
+    v-model:pagination="pagination"
   >
     <template v-slot:header="props">
       <q-tr :props="props">
@@ -152,13 +157,19 @@ function classStatus(status: string) {
         </q-td>
         <q-td>
           <q-btn
+            v-if="props.row.statusEdit === 'edit'"
             outline
-            rounded
             icon="edit"
             label="ขอแก้ไข"
             color="info"
             @click="openPopup(props.row)"
           />
+          <q-chip
+            v-else
+            :color="`${stores.classColorStatus(props.row.statusEdit)}-1`"
+            :text-color="`${stores.classColorStatus(props.row.statusEdit)}-7`"
+            >{{ props.row.statusEditName }}</q-chip
+          >
         </q-td>
       </q-tr>
     </template>
@@ -190,20 +201,48 @@ function classStatus(status: string) {
               <q-separator />
             </q-item>
           </q-list>
-          <q-card-section class="q-card-section-last">
-            <q-btn
-              outline
-              rounded
-              icon="edit"
-              label="ขอแก้ไข"
-              color="info"
-              size="sm"
-              @click="openPopup(props.row)"
-            />
+          <q-card-section>
+            <div class="row">
+              <div class="col" v-if="props.row.statusEdit === 'edit'">
+                <q-btn
+                  class="full-width text-cen"
+                  outline
+                  rounded
+                  icon="edit"
+                  label="ขอแก้ไข"
+                  color="info"
+                  size="sm"
+                  @click="openPopup(props.row)"
+                />
+              </div>
+              <div class="col" v-else>
+                <q-chip
+                  class="full-width"
+                  :color="`${stores.classColorStatus(props.row.statusEdit)}-1`"
+                  :text-color="`${stores.classColorStatus(
+                    props.row.statusEdit
+                  )}-7`"
+                >
+                  {{ props.row.statusEditName }}
+                </q-chip>
+              </div>
+            </div>
           </q-card-section>
         </q-card>
       </div>
     </template>
+    <template v-slot:pagination="scope">
+      <q-pagination
+        v-model="pagination.page"
+        active-color="primary"
+        color="dark"
+        :max="scope.pagesNumber"
+        :max-pages="5"
+        size="sm"
+        boundary-links
+        direction-links
+      ></q-pagination>
+    </template>
   </q-table>
 
   <Popup
@@ -219,6 +258,11 @@ function classStatus(status: string) {
   color: #4154b3;
 }
 
+.items-center {
+  align-items: center;
+  justify-content: center;
+}
+
 .custom-table2 {
   .q-table tr:nth-child(odd) td {
     background: white;