feat: customer form code abbrev

src/pages/03_customer-management/components/employer/EmployerFormBasicInfo.vue

@@ -25,6 +25,7 @@ defineEmits<{
   (e: 'cancel'): void;
 }>();
 
+const code = defineModel<string>('code', { required: true });
 const personName = defineModel<string>('personName', { required: true });
 const customerName = defineModel<string>('customerName', { required: true });
 const customerNameEN = defineModel<string>('customerNameEn', {
@@ -64,10 +65,15 @@ watch(
     );
   },
 );
+
+function formatCode(input: string | undefined, type: 'code' | 'number') {
+  if (!input) return;
+  return input.slice(...(type === 'code' ? [0, -6] : [-6]));
+}
 </script>
 
 <template>
-  <div class="row q-col-gutter-sm">
+  <div class="row q-col-gutter-sm q-mb-sm">
     <div class="col-12 text-weight-bold text-body1 row items-center">
       <q-icon
         flat
@@ -104,6 +110,7 @@ watch(
       <SaveButton
         icon-only
         v-if="!readonly"
+        :class="{ 'q-ml-auto': create }"
         @click="$emit('save')"
         :disabled="actionDisabled"
       />
@@ -151,6 +158,37 @@ watch(
         </q-item>
       </template>
     </q-select>
+    <q-input
+      lazy-rules="ondemand"
+      dense
+      outlined
+      :disable="!readonly && !create"
+      :readonly="readonly"
+      hide-bottom-space
+      class="col-12 col-md-4"
+      :label="$t('customer.form.codeAbbrev')"
+      for="input-abbreviation"
+      :model-value="!create ? formatCode(code, 'code') : code"
+      :rules="[
+        (val: string) =>
+          (val && val.length > 0 && /[a-zA-Z]+/.test(val)) ||
+          $t('formDialogInputHqAbbreviation'),
+      ]"
+      @update:model-value="(v: string) => (code = v)"
+    />
+    <q-input
+      lazy-rules="ondemand"
+      dense
+      outlined
+      readonly
+      :disable="!readonly"
+      hide-bottom-space
+      class="col-12 col-md-4"
+      :label="$t('customer.form.codeNumber')"
+      for="input-code"
+      :model-value="!create ? formatCode(code, 'number') : ''"
+      @update:model-value="(v: string) => (code = v)"
+    />
     <q-input
       lazy-rules="ondemand"
       dense