fix: form address, by type, information

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

@@ -212,6 +212,12 @@ watch(districtId, fetchSubDistrict);
         :label="$t('province')"
         class="col-3"
         :options="addrOptions.provinceOps"
+        lazy-rules
+        :rules="[
+          (val) =>
+            (val && val.length > 0) || $t('formDialogInputProvinceValidate'),
+        ]"
+        @update:model-value="districtId = subDistrictId = zipCode = null"
       />
       <q-select
         id="select-district-en"
@@ -228,6 +234,12 @@ watch(districtId, fetchSubDistrict);
         :label="$t('district')"
         class="col-3"
         :options="addrOptions.districtOps"
+        lazy-rules
+        :rules="[
+          (val) =>
+            (val && val.length > 0) || $t('formDialogInputDistrictValidate'),
+        ]"
+        @update:model-value="subDistrictId = zipCode = null"
       />
       <q-select
         id="select-sub-district-en"
@@ -244,6 +256,11 @@ watch(districtId, fetchSubDistrict);
         :label="$t('subDistrict')"
         class="col-3"
         :options="addrOptions.subDistrictOps"
+        lazy-rules
+        :rules="[
+          (val) =>
+            (val && val.length > 0) || $t('formDialogInputSubDistrictValidate'),
+        ]"
         @update:model-value="(v: string) => selectSubDistrict(v)"
       />
       <q-input

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

@@ -24,8 +24,8 @@ const importNationality = defineModel<string | null | undefined>(
   'importNationality',
 );
 const trainingPlace = defineModel<string | null | undefined>('trainingPlace');
-const checkpoint = defineModel<string>('checkPoint');
+const checkpoint = defineModel<string | null | undefined>('checkPoint');
-const checkpointEN = defineModel<string>('checkPointEN');
+const checkpointEN = defineModel<string | null | undefined>('checkPointEN');
 const agencyFile = defineModel<File[]>('agencyFile');
 const agencyFileList =
   defineModel<{ name: string; url: string }[]>('agencyFileList');

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

@@ -44,7 +44,7 @@ async function selectHq(id: string) {
       map-options
       options-dense
       hide-bottom-space
-      class="col-6"
+      class="col-4"
       v-model="hqId"
       option-label="label"
       option-value="value"
@@ -65,13 +65,31 @@ async function selectHq(id: string) {
       options-dense
       clearable
       hide-bottom-space
-      class="col-6"
+      class="col-4"
       v-model="brId"
       :label="$t('formDialogInputBrId')"
       option-label="label"
       option-value="value"
       :options="userStore.userOption.brOpts"
     />
+    <q-input
+      id="input-username"
+      :dense="dense"
+      :outlined="readonly ? false : outlined"
+      :borderless="readonly"
+      :readonly="usernameReadonly"
+      emit-value
+      map-options
+      options-dense
+      hide-bottom-space
+      class="col-4"
+      :label="$t('formDialogInputUsername')"
+      v-model="username"
+      :rules="[
+        (val: string) =>
+          val.length > 2 || $t('formDialogInputUsernameValidate'),
+      ]"
+    />
     <q-select
       id="select-user-type"
       :dense="dense"
@@ -83,7 +101,7 @@ async function selectHq(id: string) {
       map-options
       options-dense
       hide-bottom-space
-      class="col-3"
+      class="col-6"
       option-value="value"
       option-label="label"
       :label="$t('formDialogInputUserType')"
@@ -102,7 +120,7 @@ async function selectHq(id: string) {
       map-options
       options-dense
       hide-bottom-space
-      class="col-3"
+      class="col-6"
       :label="$t('formDialogInputUserRole')"
       option-label="label"
       option-value="value"
@@ -110,25 +128,7 @@ async function selectHq(id: string) {
       :options="userStore.userOption.roleOpts"
       :rules="[(val: string) => !!val || $t('formDialogInputUserRoleValidate')]"
     />
-    <q-input
+    <!-- <q-input
-      id="input-username"
-      :dense="dense"
-      :outlined="readonly ? false : outlined"
-      :borderless="readonly"
-      :readonly="usernameReadonly"
-      emit-value
-      map-options
-      options-dense
-      hide-bottom-space
-      class="col-3"
-      :label="$t('formDialogInputUsername')"
-      v-model="username"
-      :rules="[
-        (val: string) =>
-          val.length > 2 || $t('formDialogInputUsernameValidate'),
-      ]"
-    />
-    <q-input
       id="input-user-code"
       :dense="dense"
       :outlined="readonly ? false : outlined"
@@ -138,7 +138,7 @@ async function selectHq(id: string) {
       class="col-3"
       :label="$t('formDialogInputUserCode')"
       v-model="userCode"
-    />
+    /> -->
   </div>
   <q-separator
     v-if="separator"