แสดง ขนาดของไฟล์

src/modules/04_system/components/cardBackupRestore.vue

@@ -28,6 +28,7 @@ const {
   deleteBackUp,
   backupRunningList,
   restoreRunningList,
+  getSize,
 } = useDataStore();
 const storeData = useDataStore();
 const { dataBackUp, backupRunTotal, restoreRunTotal } = storeToRefs(storeData);
@@ -41,7 +42,13 @@ const tab = defineModel<string>("tab", { required: true });
  * Table
  */
 const filter = ref<string>("");
-const visibleColumns = ref<string[]>(["name", "createAt", "status"]);
+const visibleColumns = ref<string[]>([
+  "name",
+  "createAt",
+  "databaseSize",
+  "storageSize",
+  "status",
+]);
 const baseColumns = ref<QTableProps["columns"]>([
   {
     name: "name",
@@ -63,6 +70,26 @@ const baseColumns = ref<QTableProps["columns"]>([
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
   },
+  {
+    name: "databaseSize",
+    align: "center",
+    label: "ขนาดของฐานข้อมูล ",
+    sortable: true,
+    // field: (v) => date2Thai(v, false, true),
+    field: "databaseSize",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "storageSize",
+    align: "center",
+    label: "ขนาดของไฟล์ ",
+    sortable: true,
+    // field: (v) => date2Thai(v, false, true),
+    field: "storageSize",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
   {
     name: "status",
     align: "center",
@@ -188,8 +215,16 @@ onMounted(async () => {
       <template v-slot:body="props">
         <q-tr :props="props">
           <q-td v-for="(col, i) in props.cols" :key="col.name" :props="props">
-            <div :class="{ 'text-center': i === 2 }">
-              {{ i !== 2 ? col.value : col.value === "สำเร็จ" ? "สำเร็จ" : "" }}
+            <div :class="{ 'text-center': i === 4 }">
+              {{
+                i !== 4 && i !== 2 && i !== 3
+                  ? col.value
+                  : col.value === "สำเร็จ"
+                  ? "สำเร็จ"
+                  : i === 2 || i === 3
+                  ? getSize(col.value)
+                  : ""
+              }}
 
               <q-circular-progress
                 v-if="props.row.status === 'running' && col.name === 'status'"

src/modules/04_system/interface/response/Main.ts

@@ -2,6 +2,8 @@ interface DataBackup {
   id: string;
   name: string;
   timestamp: Date;
+  databaseSize: number;
+  storageSize: number;
   status: string;
 }