แก้ การแสดงของ ตาราง

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

@@ -23,7 +23,7 @@ const { showLoader, hideLoader, date2Thai, dialogRemove, dialogConfirm } =
   useCounterMixin();
 const { fetchListBackup, createBackUp, restore, deleteBackUp } = useDataStore();
 const storeData = useDataStore();
-const { dataBackUp } = storeToRefs(storeData);
+const { dataBackUp, backupRunTotal } = storeToRefs(storeData);
 
 /**
  * props
@@ -50,17 +50,23 @@ const baseColumns = ref<QTableProps["columns"]>([
     align: "left",
     label: "วันที่สร้าง",
     sortable: true,
-    field: (v) => date2Thai(v),
+    // field: (v) => date2Thai(v, false, true),
+    field: "timestamp",
+    format: (v) => date2Thai(v, false, true),
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "status",
+    align: "left",
+    label: "สถานะ",
+    sortable: true,
+    field: "status",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
   },
 ]);
 const columns = computed(() => {
-  if (tab.value === "restore") {
-    if (baseColumns.value) {
-      return baseColumns.value.filter((column) => column.name !== "status");
-    }
-  }
   return baseColumns.value;
 });
 
@@ -98,7 +104,6 @@ function onRestore(name: string) {
   dialogConfirm(
     $q,
     async () => {
-      showLoader();
       await restore(name);
     },
     "ยืนยันการคืนค่าข้อมูสำรอง",
@@ -120,6 +125,7 @@ onMounted(async () => {
         icon="add"
         label="สร้างข้อมูลสำรอง"
         @click="onCreateBackup"
+        :disable="backupRunTotal > 0"
       >
         <q-tooltip>สร้างข้อมูลสำรอง </q-tooltip>
       </q-btn>
@@ -170,9 +176,18 @@ onMounted(async () => {
       </template>
       <template v-slot:body="props">
         <q-tr :props="props">
-          <q-td v-for="col in props.cols" :key="col.name" :props="props">
+          <q-td v-for="(col, i) in props.cols" :key="col.name" :props="props">
             <div>
-              {{ col.value ? col.value : "-" }}
+              {{ i !== 2 ? col.value : col.value === "สำเร็จ" ? "สำเร็จ" : "" }}
+
+              <q-circular-progress
+                v-if="props.row.status === 'running' && col.name === 'status'"
+                indeterminate
+                rounded
+                size="20px"
+                color="lime"
+                class="q-ma-md"
+              />
             </div>
           </q-td>
           <q-td>