refactor: br id

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

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import useUserStore from 'stores/user';
 import { selectFilterOptionRefMod } from 'stores/utils';
-import { onMounted, ref } from 'vue';
+import { onMounted, ref, watch } from 'vue';
 import { useI18n } from 'vue-i18n';
 import { isRoleInclude } from 'src/stores/utils';
 
@@ -15,7 +15,7 @@ const userRole = defineModel<string>('userRole');
 const username = defineModel<string | null | undefined>('username');
 const userCode = defineModel<string>('userCode');
 
-defineProps<{
+const props = defineProps<{
   title?: string;
   dense?: boolean;
   outlined?: boolean;
@@ -73,9 +73,33 @@ const roleFilter = selectFilterOptionRefMod(
 );
 
 onMounted(async () => {
-  if (userStore.userOption.hqOpts[0].value)
+  if (userStore.userOption.hqOpts[0].value && !props.readonly) {
     await userStore.fetchBrOption(userStore.userOption.hqOpts[0].value);
+    if (userStore.userOption.brOpts.length === 1) {
+      brId.value = userStore.userOption.brOpts[0].value;
+    }
+    brFilter = selectFilterOptionRefMod(
+      ref(userStore.userOption.brOpts),
+      brOptions,
+      'label',
+    );
+  }
 });
+
+watch(
+  () => hqId.value,
+  async (v) => {
+    if (v) {
+      userStore.userOption.brOpts = [];
+      await userStore.fetchBrOption(v);
+      brFilter = selectFilterOptionRefMod(
+        ref(userStore.userOption.brOpts),
+        brOptions,
+        'label',
+      );
+    }
+  },
+);
 </script>
 <template>
   <div class="row col-12">

src/stores/user/index.ts

@@ -59,12 +59,19 @@ const useUserStore = defineStore('api-user', () => {
     const res = await branchStore.fetchById(id, {
       includeSubBranch: true,
     });
-    if (res && res?.branch) {
+
-      res.branch.map((item) => {
+    if (res && res.branch) {
-        userOption.value.brOpts.push({
+      res.branch.forEach((item) => {
-          label: item.code,
+        const exists = userOption.value.brOpts.some(
-          value: item.id,
+          (opt) => opt.value === item.id,
-        });
+        );
+
+        if (!exists) {
+          userOption.value.brOpts.push({
+            label: item.code,
+            value: item.id,
+          });
+        }
       });
     }
   }