refactor: handle gender and prefixName

src/components/02_personnel-management/FormPerson.vue

@@ -53,6 +53,11 @@ let nationalityFilter: (
   update: (callbackFn: () => void, afterFn?: (ref: QSelect) => void) => void,
 ) => void;
 
+function matPreFixName() {
+  if (gender.value === 'male') prefixName.value = 'mr';
+  else prefixName.value = 'mrs';
+}
+
 onMounted(() => {
   prefixNameFilter = selectFilterOptionRefMod(
     ref(optionStore.globalOption?.prefix),
@@ -100,6 +105,14 @@ watch(
     else if (v !== '') gender.value = 'female';
   },
 );
+
+watch(
+  () => gender.value,
+  () => {
+    if (props.readonly) return;
+    matPreFixName();
+  },
+);
 </script>
 <template>
   <div class="row col-12">