fix(04): service with workflow

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

@@ -63,6 +63,7 @@ import {
   Attributes,
 } from 'stores/product-service/types';
 import { computed } from 'vue';
+import { WorkflowTemplate } from 'src/stores/workflow-template/types';
 
 const flowStore = useFlowStore();
 const utilsStore = useUtilsStore();
@@ -94,7 +95,7 @@ const {
   deleteWork,
 } = productServiceStore;
 
-const { workNameItems } = storeToRefs(productServiceStore);
+const { workNameItems, splitPay } = storeToRefs(productServiceStore);
 const readOnlybranchOption = ref<boolean>(false);
 const allStat = ref<{ mode: string; count: number }[]>([]);
 const stat = ref<
@@ -264,10 +265,14 @@ const formDataProduct = ref<ProductCreate>({
   image: undefined,
 });
 
+const workflow = ref<WorkflowTemplate>();
 const formDataProductService = ref<ServiceCreate>({
   work: [],
   attributes: {
+    showTotalPrice: false,
     additional: [],
+    workflowId: '',
+    stepProperties: [],
   },
   detail: '',
   name: '',
@@ -892,6 +897,9 @@ async function assignFormDataGroup(data: ProductGroup) {
 const prevService = ref<ServiceCreate>({
   work: [],
   attributes: {
+    showTotalPrice: false,
+    workflowId: '',
+    stepProperties: [],
     additional: [],
   },
   detail: '',
@@ -941,6 +949,11 @@ async function assignFormDataProductService(id: string) {
     formDataProductService.value.work = prevService.value.work;
 
     workItems.value = res.work.map((item) => {
+      splitPay.value = Math.max(
+        ...item.productOnWork.map(
+          (productOnWorkItem) => productOnWorkItem.installmentNo,
+        ),
+      );
       return {
         id: item.id,
         name: item.name,
@@ -1043,13 +1056,16 @@ function clearFormService() {
     name: '',
     detail: '',
     attributes: {
+      workflowId: '',
+      stepProperties: [],
       additional: [],
+      showTotalPrice: false,
     },
     work: [],
     status: undefined,
     productGroupId: '',
   };
-
+  splitPay.value = 0;
   workItems.value = [];
   selectProduct.value = [];
   dialogService.value = false;
@@ -1229,6 +1245,9 @@ function triggerConfirmCloseWork() {
 }
 
 const tempValueProperties = ref<Attributes>({
+  showTotalPrice: false,
+  workflowId: '',
+  stepProperties: [],
   additional: [],
 });
 const currentPropertiesMode = ref<'service' | 'work'>('service');
@@ -3818,13 +3837,13 @@ watch(
     <div
       class="col surface-1 rounded bordered scroll row relative-position"
       :class="{
-        'q-mb-lg q-mx-lg ': $q.screen.gt.sm,
+        'q-mb-md q-mx-lg ': $q.screen.gt.sm,
         'q-mb-sm q-mx-md': !$q.screen.gt.sm,
       }"
       id="service-form"
     >
       <div
-        class="col"
+        class="col column justify-between"
         style="height: 100%; max-height: 100; overflow-y: auto"
         v-if="$q.screen.gt.sm"
       >
@@ -3876,6 +3895,20 @@ watch(
             "
           />
         </div>
+        <span
+          class="row items-center justify-center q-py-md text-caption no-wrap"
+        >
+          {{ $t('productService.service.splitPay') }}
+          <q-input
+            dense
+            outlined
+            class="col-3 split-pay q-mx-sm"
+            input-class="text-caption text-right"
+            type="number"
+            v-model="splitPay"
+          />
+          {{ $t('quotation.receiptDialog.installments') }}
+        </span>
       </div>
       <div
         class="col-12 col-md-10"
@@ -3973,7 +4006,7 @@ watch(
         />
       </div>
     </div>
-    <div
+    <!-- <div
       class="col-2 surface-1 rounded bordered row"
       :class="{
         'q-mb-lg q-mx-lg ': $q.screen.gt.sm,
@@ -3993,7 +4026,7 @@ watch(
           }
         "
       />
-    </div>
+    </div> -->
   </DialogForm>
 
   <!-- service properties -->
@@ -4026,12 +4059,12 @@ watch(
       }
     "
   >
-    <div class="q-pa-lg full-width full-height">
+    <section class="col column">
       <ServiceProperties
         v-model:properties-option="propertiesOption"
         v-model:form-service-properties="tempValueProperties"
       />
-    </div>
+    </section>
   </DialogForm>
 
   <!-- manage work name -->
@@ -4241,7 +4274,7 @@ watch(
         />
       </div>
       <div
-        class="col"
+        class="col column justify-between"
         style="height: 100%; max-height: 100; overflow-y: auto"
         v-if="$q.screen.gt.sm"
       >
@@ -4297,13 +4330,28 @@ watch(
             }"
           />
         </div>
+        <span
+          class="row items-center justify-center q-py-md text-caption no-wrap"
+        >
+          {{ $t('productService.service.splitPay') }}
+          <q-input
+            :readonly="!infoServiceEdit"
+            dense
+            outlined
+            class="col-3 split-pay q-mx-sm"
+            input-class="text-caption text-right"
+            type="number"
+            v-model="splitPay"
+          />
+          {{ $t('quotation.receiptDialog.installments') }}
+        </span>
       </div>
       <div
         class="col-12 col-md-10"
         id="customer-form-content"
         :class="{
           'q-py-md q-pr-md ': $q.screen.gt.sm,
-          'q-py-md q-px-lg': !$q.screen.gt.sm,
+          'q-py-sm q-px-lg': !$q.screen.gt.sm,
         }"
         style="height: 100%; max-height: 100%; overflow-y: auto"
       >
@@ -4354,7 +4402,7 @@ watch(
         />
       </div>
     </div>
-    <div
+    <!-- <div
       class="col-2 surface-1 rounded bordered row"
       :class="{
         'q-mb-lg q-mx-lg ': $q.screen.gt.sm,
@@ -4375,7 +4423,7 @@ watch(
           }
         "
       />
-    </div>
+    </div> -->
   </DialogForm>
 
   <q-dialog v-model="holdDialog" position="bottom">
@@ -4751,4 +4799,8 @@ watch(
   color: hsl(var(--info-bg));
   font-weight: 600;
 }
+
+:deep(.split-pay .q-field__control) {
+  height: 23px;
+}
 </style>