fix: form component

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

@@ -0,0 +1,132 @@
+<script setup lang="ts">
+import useUserStore from 'src/stores/user';
+
+const userStore = useUserStore();
+
+const hqId = defineModel<string | null | undefined>('hqId');
+const brId = defineModel<string | null | undefined>('brId');
+const userType = defineModel<string>('userType');
+const userRole = defineModel<string>('userRole');
+const userName = defineModel<string | null | undefined>('userName');
+const userCode = defineModel<string>('userCode');
+
+defineProps<{
+  dense?: boolean;
+  outlined?: boolean;
+  readonly?: boolean;
+  separator?: boolean;
+}>();
+
+async function selectHq(id: string) {
+  if (!id) return;
+  brId.value = '';
+  userStore.userOption.brOpts = [];
+  await userStore.fetchBrOption(id);
+}
+</script>
+<template>
+  <div class="col-3 app-text-muted">• ข้อมูลพื้นฐาน</div>
+  <div class="col-9 row q-col-gutter-md">
+    <q-select
+      :dense="dense"
+      :outlined="outlined"
+      :readonly="readonly"
+      :hide-dropdown-icon="readonly"
+      emit-value
+      map-options
+      options-dense
+      hide-bottom-space
+      class="col-6"
+      bg-color="white"
+      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)"
+    />
+    <q-select
+      :dense="dense"
+      :outlined="outlined"
+      :readonly="readonly"
+      :hide-dropdown-icon="readonly"
+      emit-value
+      map-options
+      options-dense
+      hide-bottom-space
+      class="col-6"
+      label="รหัสสาขา"
+      bg-color="white"
+      option-label="label"
+      option-value="value"
+      v-model="brId"
+      :options="userStore.userOption.brOpts"
+    />
+    <q-select
+      :dense="dense"
+      :outlined="outlined"
+      :readonly="readonly"
+      :hide-dropdown-icon="readonly"
+      emit-value
+      map-options
+      options-dense
+      hide-bottom-space
+      class="col-3"
+      bg-color="white"
+      option-value="value"
+      option-label="label"
+      label="ประเภทผู้ใช้งาน"
+      v-model="userType"
+      :options="userStore.userOption.userTypeOpts"
+      :rules="[(val: string) => !!val || 'กรุณาเลือกประเภทผู้ใช้งาน']"
+    />
+    <q-select
+      :dense="dense"
+      :outlined="outlined"
+      :readonly="readonly"
+      :hide-dropdown-icon="readonly"
+      emit-value
+      map-options
+      options-dense
+      hide-bottom-space
+      class="col-3"
+      bg-color="white"
+      label="สิทธิ์ผู้ใช้งาน"
+      option-label="label"
+      option-value="value"
+      v-model="userRole"
+      :options="userStore.userOption.roleOpts"
+      :rules="[(val: string) => !!val || 'กรุณาเลือกสิทธิ์ผู้ใช้งาน']"
+    />
+    <q-input
+      :dense="dense"
+      :outlined="outlined"
+      :readonly="readonly"
+      emit-value
+      map-options
+      options-dense
+      hide-bottom-space
+      class="col-3"
+      bg-color="white"
+      label="ชื่อผู้ใช้งาน (Username)"
+      v-model="userName"
+      :rules="[(val: string) => val.length > 2 || 'กรุณากรอกชื่อผู้ใช้งาน']"
+    />
+    <q-input
+      :dense="dense"
+      :outlined="outlined"
+      readonly
+      hide-bottom-space
+      class="col-3"
+      bg-color="white"
+      label="รหัสพนักงาน"
+      v-model="userCode"
+    />
+  </div>
+  <q-separator
+    v-if="separator"
+    class="col-12 q-mb-md"
+    style="padding-block: 0.5px; margin-top: 32px"
+  />
+</template>