feat: split page

src/pages/05_quotation/peview/ViewForm.vue

@@ -1,13 +1,65 @@
 <script lang="ts" setup>
+import { onMounted, nextTick, ref, watch } from 'vue';
 // NOTE: Import stores
 // NOTE  Import Types
 // NOTE: Import Components
 import ViewHeader from './ViewHeader.vue';
+
+let count = 50;
+
+const elements = ref<HTMLElement[]>([]);
+const chunks = ref<number[][]>([[]]);
+
+async function assignData() {
+  for (let i = 0; i < count; i++) {
+    let el = elements.value.at(-1);
+
+    if (!el) return;
+
+    if (getHeight(el) < 500) {
+      chunks.value.at(-1)?.push(1);
+    } else {
+      chunks.value.push([]);
+      i--;
+    }
+
+    await nextTick();
+  }
+}
+
+function getHeight(el: HTMLElement) {
+  const shadow = document.createElement('div');
+
+  shadow.style.opacity = '0';
+  shadow.style.position = 'absolute';
+  shadow.style.top = '-999999px';
+  shadow.style.left = '-999999px';
+  shadow.style.pointerEvents = 'none';
+
+  document.body.appendChild(shadow);
+
+  shadow.appendChild(el.cloneNode(true));
+
+  const height = shadow.offsetHeight;
+
+  document.body.removeChild(shadow);
+
+  return height;
+}
+
+onMounted(() => {
+  assignData();
+});
+
+watch(elements, () => {
+  console.log(elements.value);
+});
 </script>
 
 <template>
+  <button @click="console.log(elements)">Click</button>
   <div class="row justify-between container">
-    <section class="content">
+    <section class="content" v-for="chunk in chunks">
       <ViewHeader />
 
       <span
@@ -23,7 +75,7 @@ import ViewHeader from './ViewHeader.vue';
         รายการสินค้า
       </span>
 
-      <table style="width: 100%" class="q-mb-sm" cellpadding="0">
+      <table ref="elements" class="q-mb-sm" cellpadding="0" style="width: 100%">
         <tbody>
           <tr>
             <th>อันดับ</th>
@@ -35,7 +87,7 @@ import ViewHeader from './ViewHeader.vue';
             <th>ภาษี</th>
             <th>มูลค่า</th>
           </tr>
-          <tr class="color-tr" v-for="(_, i) in Array(18)">
+          <tr class="color-tr" v-for="(_, i) in chunk">
             <td class="text-center">{{ i + 1 }}</td>
             <td>PG01T01S01001</td>
             <td>ค่าบริการและค่าดำเนินงานยื่นแบบคำร้องขอนำเข้า MOU (Demand)</td>
@@ -258,6 +310,7 @@ td {
 .container :deep(*) {
   font-size: 95%;
 }
+
 .content {
   width: 100%;
   padding: 0.5in;
@@ -265,8 +318,8 @@ td {
   background: white;
   page-break-after: always;
   break-after: page;
-  height: 11.7in;
+  /* height: 11.7in; */
-  max-height: 11.7in;
+  /* max-height: 11.7in; */
 }
 
 .position-bottom {