feat: select first

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

@@ -1,7 +1,10 @@
 <script setup lang="ts">
+import { storeToRefs } from 'pinia';
 import useUserStore from 'src/stores/user';
+import { watch } from 'vue';
 
 const userStore = useUserStore();
+const { userOption } = storeToRefs(userStore);
 
 const hqId = defineModel<string | null | undefined>('hqId');
 const brId = defineModel<string | null | undefined>('brId');
@@ -23,6 +26,9 @@ async function selectHq(id: string) {
   brId.value = '';
   userStore.userOption.brOpts = [];
   await userStore.fetchBrOption(id);
+  if (userStore.userOption.brOpts.length === 1) {
+    brId.value = userStore.userOption.brOpts[0].value;
+  }
 }
 </script>
 <template>
@@ -38,10 +44,10 @@ async function selectHq(id: string) {
       options-dense
       hide-bottom-space
       class="col-6"
+      v-model="hqId"
       option-label="label"
       option-value="value"
       label="รหัสสำนักงานใหญ่"
-      v-model="hqId"
       :options="userStore.userOption.hqOpts"
       :rules="[(val: string) => !!val || 'กรุณาเลือกสำนักงานใหญ่']"
       @update:model-value="(val: string) => selectHq(val)"
@@ -54,12 +60,13 @@ async function selectHq(id: string) {
       emit-value
       map-options
       options-dense
+      clearable
       hide-bottom-space
       class="col-6"
+      v-model="brId"
       label="รหัสสาขา"
       option-label="label"
       option-value="value"
-      v-model="brId"
       :options="userStore.userOption.brOpts"
     />
     <q-select