feat: อัปรูปอัน product

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

@@ -77,12 +77,12 @@ const dialogProduct = ref<boolean>(false);
 const dialogService = ref<boolean>(false);
 const statusToggle = ref<boolean>(false);
 const profileSubmit = ref<boolean>(false);
-const profileFile = ref<File | undefined>(undefined);
+const imageProduct = ref<File | undefined>(undefined);
 const profileUrl = ref<string | null>('');
 
 const groupName = ref<string>('งาน MOU');
 const dialogProductServiceType = ref<boolean>(false);
-const dialogTotalProduct = ref<boolean>(true);
+const dialogTotalProduct = ref<boolean>(false);
 const productMode = ref<'group' | 'type' | 'service' | 'product'>('group');
 
 const productGroup = ref<ProductGroup[]>();
@@ -109,6 +109,7 @@ const formDataProduct = ref<ProductCreate>({
   detail: '',
   name: '',
   code: '',
+  image: undefined,
 });
 
 const serviceTab = [
@@ -141,9 +142,9 @@ const inputFile = (() => {
   });
 
   element.addEventListener('change', () => {
-    profileFile.value = element.files?.[0];
+    imageProduct.value = element.files?.[0];
-    if (profileFile.value) {
+    if (imageProduct.value) {
-      reader.readAsDataURL(profileFile.value);
+      reader.readAsDataURL(imageProduct.value);
     }
   });
 
@@ -307,6 +308,7 @@ function assignFormDataProduct(data: ProductList) {
     detail: data.detail,
     name: data.name,
     code: data.code,
+    image: undefined,
   };
 }
 
@@ -332,6 +334,7 @@ function clearFormProduct() {
     detail: '',
     name: '',
     code: '',
+    image: undefined,
   };
 
   dialogProduct.value = false;
@@ -339,6 +342,10 @@ function clearFormProduct() {
 
 async function submitProduct() {
   formDataProduct.value.productTypeId = currentIdType.value;
+  if (profileSubmit.value) {
+    formDataProduct.value.image = imageProduct.value;
+  }
+
   await createProduct(formDataProduct.value);
 
   dialogProduct.value = false;
@@ -693,7 +700,6 @@ watch(currentStatus, async () => {
               @on-click="
                 async () => {
                   currentId = v.id;
-                  console.log(v.id);
                   productMode = 'type';
                   await fetchListType();
                 }
@@ -861,6 +867,7 @@ watch(currentStatus, async () => {
               :code="i.code"
               :price="i.price"
               :process="i.process"
+              :id="i.id"
               @viewDetail="() => {}"
             />
           </div>

src/stores/product-service/index.ts

@@ -1,6 +1,8 @@
 import { defineStore } from 'pinia';
 import { api } from 'src/boot/axios';
 
+import axios from 'axios';
+
 import { Pagination } from 'src/stores/types';
 
 import {
@@ -278,11 +280,21 @@ const useProductServiceStore = defineStore('api-product-service', () => {
   }
 
   async function createProduct(data: ProductCreate) {
-    const { ...payload } = data;
+    const { image, ...payload } = data;
 
-    const res = await api.post<ProductCreate>('/product', {
+    const res = await api.post<ProductCreate & { imageUploadUrl: string }>(
+      '/product',
+      {
         ...payload,
-    });
+      },
+    );
+    image &&
+      (await axios
+        .put(res.data.imageUploadUrl, image, {
+          headers: { 'Content-Type': image.type },
+          onUploadProgress: (e) => console.log(e),
+        })
+        .catch((e) => console.error(e)));
 
     if (!res) return false;
 

src/stores/product-service/types.ts

@@ -109,6 +109,7 @@ export interface ProductCreate {
   detail: string;
   name: string;
   code: string;
+  image?: File;
 }
 
 export interface ProductUpdate {
@@ -119,6 +120,7 @@ export interface ProductUpdate {
   process: string;
   detail: string;
   name: string;
+  image?: File;
 }
 
 //