feat: add service dialog

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

@@ -14,6 +14,7 @@ import BasicInfoProduct from 'src/components/04_product-service/ฺBasicInfoProd
 import PriceDataComponent from 'src/components/04_product-service/PriceDataComponent.vue';
 import ProfileUpload from 'src/components/ProfileUpload.vue';
 import TotalProductCardComponent from 'components/04_product-service/TotalProductCardComponent.vue';
+import FormServiceWork from 'src/components/04_product-service/FormServiceWork.vue';
 
 import { Status } from 'src/stores/types';
 import NoData from 'components/NoData.vue';
@@ -73,6 +74,7 @@ const drawerInfo = ref<boolean>(false);
 const isEdit = ref<boolean>(false);
 const dialogInputForm = ref<boolean>(false);
 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);
@@ -109,6 +111,18 @@ const formDataProduct = ref<ProductCreate>({
   code: '',
 });
 
+const serviceTab = [
+  {
+    name: 'serviceInformation',
+    label: 'serviceInformation',
+  },
+  {
+    name: 'workInformation',
+    label: 'workInformation',
+  },
+];
+const currentServiceTab = ref('serviceInformation');
+
 const currentId = ref<string>('');
 const currentIdType = ref<string>('');
 const resultSearchGroup = ref<ProductGroup[]>();
@@ -417,7 +431,7 @@ watch(currentStatus, async () => {
     ></q-fab-action>
     <q-fab-action
       v-if="productMode === 'service'"
-      label="เพิ่มบริการ"
+      :label="$t('addService')"
       external-label
       label-position="left"
       style="color: white; background-color: hsla(var(--blue-11-hsl))"
@@ -426,7 +440,8 @@ watch(currentStatus, async () => {
       @click="
         () => {
           clearFormGroup();
-          dialogInputForm = true;
+          currentServiceTab = 'serviceInformation';
+          dialogService = true;
         }
       "
     ></q-fab-action>
@@ -1047,6 +1062,36 @@ watch(currentStatus, async () => {
       />
     </AppBox>
   </FormDialog>
+
+  <FormDialog
+    no-address
+    :title="$t('addService')"
+    v-model:modal="dialogService"
+    v-model:tabs-list="serviceTab"
+    v-model:current-tab="currentServiceTab"
+  >
+    <template #prepend>
+      <ProfileUpload
+        v-model:url-profile="profileUrl"
+        v-model:status-toggle="statusToggle"
+        v-model:profile-submit="profileSubmit"
+        @input-file="inputFile.click()"
+      />
+    </template>
+
+    <template #information>
+      <BasicInformation
+        v-if="currentServiceTab === 'serviceInformation'"
+        dense
+        service
+      />
+      <FormServiceWork
+        v-if="currentServiceTab === 'workInformation'"
+        dense
+        @addProduct="dialogTotalProduct = true"
+      />
+    </template>
+  </FormDialog>
 </template>
 
 <style scoped>