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];
-    if (profileFile.value) {
-      reader.readAsDataURL(profileFile.value);
+    imageProduct.value = element.files?.[0];
+    if (imageProduct.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>