feat: import prodect from file

src/pages/04_product-service/MainPage.vue

@@ -34,6 +34,7 @@ import {
   UndoButton,
   ToggleButton,
   PasteButton,
+  ImportButton,
 } from 'components/button';
 import TableProduct from 'src/components/04_product-service/TableProduct.vue';
 import PaginationPageSize from 'src/components/PaginationPageSize.vue';
@@ -99,6 +100,8 @@ const {
   createWork,
   editWork,
   deleteWork,
+
+  importProduct,
 } = productServiceStore;
 
 const currentCopy = ref<{
@@ -107,6 +110,7 @@ const currentCopy = ref<{
 }>();
 const { workNameItems } = storeToRefs(productServiceStore);
 const allStat = ref<{ mode: string; count: number }[]>([]);
+
 const stat = ref<
   {
     icon: string;
@@ -2262,7 +2266,6 @@ watch(
                       },
                     ]"
                   ></q-select>
-
                   <q-select
                     v-if="modeView === false"
                     id="select-field"
@@ -2285,7 +2288,6 @@ watch(
                     multiple
                     dense
                   />
-
                   <q-btn-toggle
                     v-model="modeView"
                     id="btn-mode"
@@ -2760,6 +2762,26 @@ watch(
                     </AdvanceSearch>
                   </template>
                 </q-input>
+                <div
+                  class="flex q-mr-auto q-pl-sm"
+                  v-if="productAndServiceTab === 'product'"
+                >
+                  <input ref="fileImport" type="file" hidden />
+                  <ImportButton
+                    type="file"
+                    import-file
+                    icon-only
+                    @file-selected="
+                      (file) => {
+                        importProduct(
+                          currentIdGroup,
+                          file,
+                          async () => await fetchListOfProduct(),
+                        );
+                      }
+                    "
+                  />
+                </div>
 
                 <div class="row col-md-6" style="white-space: nowrap">
                   <q-select
@@ -2785,7 +2807,6 @@ watch(
                     ]"
                     @update:model-value="fetchStatus()"
                   ></q-select>
-
                   <q-select
                     v-if="modeView === false"
                     :hide-dropdown-icon="$q.screen.lt.sm"
@@ -2820,7 +2841,6 @@ watch(
                     multiple
                     dense
                   />
-
                   <q-btn-toggle
                     v-model="modeView"
                     id="btn-mode"