fix: improve work name management and validation logic

src/components/04_product-service/WorkManagementComponent.vue

@@ -98,7 +98,8 @@ watch(
   (c, o) => {
     const list = c.map((v: { name: string }) => v.name);
     const oldList = o.map((v: { name: string }) => v.name);
-    const index = oldList.indexOf(workName.value || '');
+    const index = workName.value ? oldList.indexOf(workName.value) : -1;
+    if (index === -1) return;
 
     if (
       list[index] !== oldList[index] &&
@@ -704,8 +705,8 @@ watch(
 }
 
 :deep(
-    .q-item__section.column.q-item__section--side.justify-center.q-item__section--avatar.q-focusable.relative-position.cursor-pointer
-  ) {
+  .q-item__section.column.q-item__section--side.justify-center.q-item__section--avatar.q-focusable.relative-position.cursor-pointer
+) {
   justify-content: start !important;
   padding-right: 8px !important;
   padding-top: 16px;
@@ -735,8 +736,8 @@ watch(
 }
 
 :deep(
-    i.q-icon.mdi.mdi-chevron-down-circle.q-expansion-item__toggle-icon.q-expansion-item__toggle-icon--rotated
-  ) {
+  i.q-icon.mdi.mdi-chevron-down-circle.q-expansion-item__toggle-icon.q-expansion-item__toggle-icon--rotated
+) {
   color: var(--brand-1);
 }
 

src/components/04_product-service/WorkNameManagement.vue

@@ -1,7 +1,6 @@
 <script lang="ts" setup>
 import { nextTick, onMounted, ref, watch } from 'vue';
 import { DeleteButton, EditButton, SaveButton, UndoButton } from '../button';
-import { scrollToElement } from 'stores/utils';
 // import { useI18n } from 'vue-i18n';
 // import { storeToRefs } from 'pinia';
 
@@ -138,11 +137,8 @@ watch(
               @click="
                 () => {
                   assignClone();
-                  if (nameList[nameList.length - 1].name === '') {
-                    $emit('delete', cloneList[cloneList.length - 1].id, true);
-                    cloneList = cloneList.filter((item) => item.name !== '');
-                    nameList = nameList.filter((item) => item.name !== '');
-                  }
+                  cloneList = cloneList.filter((item) => item.name !== '');
+                  nameList = nameList.filter((item) => item.name !== '');
                 }
               "
             />

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

@@ -60,6 +60,7 @@ import {
   ServiceById,
   WorkItems,
   Attributes,
+  WorkCreate,
 } from 'stores/product-service/types';
 import { computed } from 'vue';
 import {
@@ -1448,17 +1449,11 @@ function confirmDeleteWork(id: string, noDialog?: boolean) {
   }
 }
 
-function triggerConfirmCloseWork() {
+function triggerConfirmCloseWorkName() {
   dialogWarningClose(t, {
     message: t('dialog.message.warningClose'),
     action: () => {
       manageWorkNameDialog.value = false;
-      if (workNameItems.value[workNameItems.value.length - 1].name === '') {
-        confirmDeleteWork(
-          workNameItems.value[workNameItems.value.length - 1].id,
-          true,
-        );
-      }
     },
     cancel: () => {},
   });
@@ -1888,6 +1883,20 @@ async function copy(id: string) {
   dialogService.value = true;
 }
 
+function addWorkName(data: { name: string; order: number }) {
+  workNameItems.value.push({ id: '', name: data.name, isEdit: true });
+}
+
+async function submitWorkName(
+  workId: string,
+  data: Partial<WorkCreate & { status: string }>,
+) {
+  if (workNameItems.value.length === 0) return;
+
+  if (!workId) await createWork({ ...data, order: 1 });
+  else await editWork(workId, data);
+}
+
 watch(
   () => formService.value.attributes.workflowId,
   async (a, b) => {
@@ -4669,7 +4678,7 @@ watch(
             ? workNameRef.isWorkNameEdit()
             : false;
         if (isWorkNameEdit) {
-          triggerConfirmCloseWork();
+          triggerConfirmCloseWorkName();
           return true;
         }
         return false;
@@ -4681,8 +4690,8 @@ watch(
         ref="workNameRef"
         v-model:name-list="workNameItems"
         @delete="confirmDeleteWork"
-        @edit="editWork"
-        @add="createWork"
+        @edit="submitWorkName"
+        @add="addWorkName"
       />
     </div>
   </DialogForm>

src/stores/product-service/index.ts

@@ -441,7 +441,7 @@ const useProductServiceStore = defineStore('api-product-service', () => {
       ...payload,
     });
 
-    if (res && res.status < 200) {
+    if (res && res.status < 400) {
       await fetchListOfWork();
       return res.data;
     }