feat: detect unsave and confirmation

src/pages/03_customer-management/components/FormBranch.vue

@@ -0,0 +1,48 @@
+<script setup lang="ts">
+import { CustomerCreate } from 'src/stores/customer/types';
+
+const branch = defineModel<CustomerCreate['customerBranch']>('customerBranch', {
+  default: [],
+});
+
+defineProps<{
+  editable?: boolean;
+}>();
+</script>
+
+<template>
+  <div class="row q-col-gutter-md">
+    <div class="col-12 text-weight-bold text-body1 row items-center">
+      <q-icon
+        flat
+        size="xs"
+        class="q-pa-sm rounded q-mr-xs"
+        color="info"
+        name="mdi-briefcase"
+        style="background-color: var(--surface-3)"
+      />
+      <span>{{ $t('customer.form.group.branch') }}</span>
+      <q-btn
+        type="button"
+        rounded
+        flat
+        dense
+        unelevated
+        color="primary"
+        @click="$emit('addBranch')"
+        v-if="editable"
+        icon="mdi-plus"
+        class="q-ml-md"
+      />
+    </div>
+
+    <template v-for="item in branch">
+      <span
+        class="col-12 text-weight-bold"
+        :id="`form-branch-customer-no-${item.branchNo}`"
+      >
+        {{ $t('customer.form.branch.title', { name: item.branchNo || 0 }) }}
+      </span>
+    </template>
+  </div>
+</template>