feat: customer branch form

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

@@ -4,13 +4,27 @@ import { QSelect } from 'quasar';
 import { selectFilterOptionRefMod } from 'stores/utils';
 import { getRole } from 'src/services/keycloak';
 import { onMounted } from 'vue';
+import {
+  SaveButton,
+  EditButton,
+  CancelButton,
+  DeleteButton,
+} from 'src/components/button';
 
 defineProps<{
   prefixId?: string;
   outlined?: boolean;
   readonly?: boolean;
+  create?: boolean;
+  actionDisabled?: boolean;
   customerType?: 'CORP' | 'PERS';
 }>();
+defineEmits<{
+  (e: 'save'): void;
+  (e: 'edit'): void;
+  (e: 'delete'): void;
+  (e: 'cancel'): void;
+}>();
 
 const personName = defineModel<string>('personName', { required: true });
 const customerName = defineModel<string>('customerName', { required: true });
@@ -65,15 +79,32 @@ watch(
         style="background-color: var(--surface-3)"
       />
       <span>{{ $t('customer.form.group.basicInfo') }}</span>
-      <q-btn
+      <EditButton
+        v-if="readonly && !create"
+        type="button"
+        @click="$emit('edit')"
+        class="q-ml-auto"
+        :disabled="actionDisabled"
+      />
+      <DeleteButton
+        v-if="readonly && !create"
+        @click="$emit('delete')"
+        type="button"
+        class="q-ml-sm"
+        :disabled="actionDisabled"
+      />
+      <SaveButton
         v-if="!readonly"
-        type="submit"
-        dense
-        unelevated
-        color="primary"
-        :label="$t('save')"
         @click="$emit('save')"
-        class="q-px-md q-ml-auto rounded"
+        class="q-ml-auto"
+        :disabled="actionDisabled"
+      />
+      <CancelButton
+        v-if="!readonly && !create"
+        type="button"
+        class="q-ml-sm"
+        :disabled="actionDisabled"
+        @click="$emit('cancel')"
       />
     </div>
     <q-select