feat: implement deepEquals function and enhance form service validation

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

@@ -66,6 +66,7 @@ import {
   WorkflowTemplate,
 } from 'src/stores/workflow-template/types';
 import { useWorkflowTemplate } from 'src/stores/workflow-template';
+import { deepEquals } from 'src/utils/arr';
 
 const flowStore = useFlowStore();
 const navigatorStore = useNavigator();
@@ -1093,6 +1094,55 @@ function clearFormService() {
   profileFileImg.value = null;
 }
 
+function sameFormService() {
+  const isEdit = dialogServiceEdit.value;
+  const defaultFormService = {
+    code: isEdit ? currentService.value?.code : '',
+    name: isEdit ? currentService.value?.name : '',
+    detail: isEdit ? currentService.value?.detail : '',
+    attributes: isEdit
+      ? currentService.value?.attributes
+      : {
+          workflowId: '',
+          additional: [],
+          showTotalPrice: false,
+          workflowStep: [],
+        },
+    work: isEdit
+      ? currentService.value?.work.map((v) => ({
+          attributes: v.attributes,
+          id: v.id,
+          name: v.name,
+          product: v.productOnWork.map((p) => ({
+            id: p.productId,
+            installmentNo: p.installmentNo,
+            stepCount: p.stepCount,
+          })),
+        }))
+      : [],
+    status: isEdit ? currentService.value?.status : undefined,
+    productGroupId: isEdit ? currentService.value?.productGroupId : '',
+    installments: isEdit ? currentService.value?.installments : 1,
+    selectedImage: isEdit ? currentService.value?.selectedImage : '',
+  };
+
+  if (
+    deepEquals(
+      isEdit
+        ? formService.value
+        : {
+            ...formService.value,
+            selectedImage: '',
+            detail: formService.value.detail.replace(/<\/?[^>]+(>|$)/g, ''),
+          },
+      defaultFormService,
+    )
+  ) {
+    return true;
+  }
+  return false;
+}
+
 function assignFormDataProductServiceCreate() {
   formService.value.work = [];
 
@@ -3957,13 +4007,21 @@ watch(
         submitService();
       }
     "
-    :close="
+    :before-close="
       () => {
-        clearFormService();
-        dialogService = false;
-        serviceTreeView = false;
-        onCreateImageList = { selectedImage: '', list: [] };
-        flowStore.rotate();
+        if (workItems.length > 0 || !sameFormService()) {
+          dialogWarningClose($t, {
+            action: () => {
+              clearFormService();
+              dialogService = false;
+              serviceTreeView = false;
+              onCreateImageList = { selectedImage: '', list: [] };
+              flowStore.rotate();
+            },
+            cancel: () => {},
+          });
+          return true;
+        } else return false;
       }
     "
   >
@@ -4288,12 +4346,21 @@ watch(
         submitService();
       }
     "
-    :close="
+    :before-close="
       () => {
-        clearFormService();
-        flowStore.rotate();
-        serviceTreeView = false;
-        dialogServiceEdit = false;
+        if (!sameFormService()) {
+          dialogWarningClose($t, {
+            action: () => {
+              clearFormService();
+              dialogService = false;
+              serviceTreeView = false;
+              onCreateImageList = { selectedImage: '', list: [] };
+              flowStore.rotate();
+            },
+            cancel: () => {},
+          });
+          return true;
+        } else return false;
       }
     "
   >