feat: add sort numbers

src/components/TabComponent.vue

@@ -1,8 +1,9 @@
 <script setup lang="ts">
 import { ref } from 'vue';
 import { CustomerBranchCreate } from 'stores/customer/types';
+import { onMounted } from 'vue';
 
-defineProps<{
+const props = defineProps<{
   readonly?: boolean;
   edit?: boolean;
   prefixId: string;
@@ -12,15 +13,17 @@ const customerBranch = defineModel<CustomerBranchCreate[]>('customerBranch', {
   default: [],
 });
 
+const statBranchNo = defineModel<number>('statBranchNo', {
+  default: 0,
+});
+
 const tab = defineModel<number>('tabIndex', { required: true });
 
-const index = ref<number>(0);
-
 function addData() {
-  index.value++;
+  const currentNo = (customerBranch.value.at(-1)?.branchNo || 0) + 1;
   customerBranch.value.push({
     code: '',
-    branchNo: undefined,
+    branchNo: currentNo,
     address: '',
     addressEN: '',
     provinceId: '',
@@ -65,7 +68,18 @@ function close(index: number) {
     }
   }
   customerBranch.value.splice(index, 1);
+
+  customerBranch.value.forEach((v, i) => {
+    if (!!v.branchNo && v.branchNo >= index + 1) {
+      v.branchNo = v.branchNo - 1;
+    }
+  });
 }
+
+onMounted(() => {
+  customerBranch.value[0].branchNo =
+    statBranchNo.value !== 0 ? statBranchNo.value : 1;
+});
 </script>
 <template>
   <div class="row no-wrap full-width">
@@ -98,7 +112,7 @@ function close(index: number) {
         v-for="(v, index) in customerBranch"
         :key="index"
         :name="index"
-        :label="`${$t('customerBranchFormTab')} `"
+        :label="`${customerBranch[index].name !== '' ? customerBranch[index].name : $t('customerBranchFormTab')} `"
         :disable="tab !== index && edit"
         @click="tab = index"
         no-caps