@7365admin1/layer-common 1.11.19 → 1.11.21

package/components/TableMain.vue

@@ -1,29 +1,61 @@
 <template>
   <v-row no-gutters>
     <!-- Top Actions -->
-    <v-col cols="12" class="mb-2" v-if="(canCreate || $slots.actions)">
+    <v-col cols="12" class="mb-2" v-if="canCreate || $slots.actions">
       <v-row no-gutters>
         <slot name="actions">
           <v-col cols="12">
-            <v-row no-gutters justify="space-between">
-              <v-btn v-if="canCreate" class="text-none" rounded="pill" variant="tonal" size="large"
-                @click="emits('create')">
+            <v-row no-gutters>
+              <v-btn
+                v-if="canCreate"
+                class="text-none"
+                rounded="pill"
+                variant="tonal"
+                size="large"
+                @click="emits('create')"
+              >
                 {{ createLabel }}
               </v-btn>
-              <v-text-field v-if="props.canSearch" v-model="searchInput" density="compact" placeholder="Search" clearable max-width="300"
-                append-inner-icon="mdi-magnify" hide-details />
+              <v-text-field
+                v-if="canSearch"
+                v-model="searchInput"
+                density="compact"
+                placeholder="Search"
+                clearable
+                max-width="300"
+                append-inner-icon="mdi-magnify"
+                hide-details
+              />
+              <v-btn
+                v-if="canScanVisitorQRCode"
+                text="Scan QR Code"
+                class="text-none ml-2"
+                rounded="pill"
+                variant="tonal"
+                size="large"
+                @click="emits('scan')"
+              />
             </v-row>
           </v-col>
         </slot>
-
       </v-row>
     </v-col>
 
     <!-- Table Card -->
     <v-col cols="12">
-      <v-card width="100%" variant="outlined" border="thin" rounded="lg" :loading="loading">
+      <v-card
+        width="100%"
+        variant="outlined"
+        border="thin"
+        rounded="lg"
+        :loading="loading"
+      >
         <!-- Toolbar -->
-        <v-toolbar density="compact" color="grey-lighten-4" :extension-height="extensionHeight">
+        <v-toolbar
+          density="compact"
+          color="grey-lighten-4"
+          :extension-height="extensionHeight"
+        >
           <template #prepend>
             <v-btn fab icon density="comfortable" @click="emits('refresh')">
               <v-icon>mdi-refresh</v-icon>
@@ -36,8 +68,11 @@
               <span class="mr-2 text-caption text-fontgray">
                 {{ pageRange }}
               </span>
-              <local-pagination v-model="internalPage" :length="pages"
-                @update:value="emits('update:page', internalPage)" />
+              <local-pagination
+                v-model="internalPage"
+                :length="pages"
+                @update:value="emits('update:page', internalPage)"
+              />
             </v-row>
           </template>
 
@@ -46,12 +81,18 @@
           </template>
         </v-toolbar>
 
-
         <!-- Data Table -->
-        <v-data-table :headers="headers" :items="items" :item-value="itemValue" :items-per-page="itemsPerPage"
-          fixed-header hide-default-footer :hide-default-header="!showHeader"
+        <v-data-table
+          :headers="headers"
+          :items="items"
+          :item-value="itemValue"
+          :items-per-page="itemsPerPage"
+          fixed-header
+          hide-default-footer
+          :hide-default-header="!showHeader"
           @click:row="(_: any, data: any) => emits('row-click', data)"
-          :style="`max-height: calc(100vh - (${offset}px))`">
+          :style="`max-height: calc(100vh - (${offset}px))`"
+        >
           <template v-for="(_, slotName) in $slots" #[slotName]="slotProps">
             <slot :name="slotName" v-bind="slotProps" />
           </template>
@@ -80,6 +121,10 @@ const props = defineProps({
     type: Boolean,
     default: false,
   },
+  canScanVisitorQRCode: {
+    type: Boolean,
+    default: false,
+  },
   canSearch: {
     type: Boolean,
     default: false,
@@ -110,21 +155,27 @@ const props = defineProps({
   },
   showHeader: {
     type: Boolean,
-    default: false
+    default: false,
   },
   extensionHeight: {
     type: Number,
-    default: 50
+    default: 50,
   },
   offset: {
     type: Number,
-    default: 200
-  }
+    default: 200,
+  },
 });
 
-const emits = defineEmits(["create", "refresh", "update:page", "row-click"]);
+const emits = defineEmits([
+  "create",
+  "scan",
+  "refresh",
+  "update:page",
+  "row-click",
+]);
 
-const searchInput = defineModel('search', { default: "" })
+const searchInput = defineModel("search", { default: "" });
 
 const internalPage = ref(props.page);
 watch(