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

<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');
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;
  usernameReadonly?: boolean;
}>();

async function selectHq(id: string) {
  if (!id) return;
  brId.value = '';
  userStore.userOption.brOpts = [];
  await userStore.fetchBrOption(id);
  if (userStore.userOption.brOpts.length === 1) {
    brId.value = userStore.userOption.brOpts[0].value;
  }
}
</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"
      v-model="hqId"
      option-label="label"
      option-value="value"
      label="รหัสสำนักงานใหญ่"
      :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
      clearable
      hide-bottom-space
      class="col-6"
      v-model="brId"
      label="รหัสสาขา"
      option-label="label"
      option-value="value"
      :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"
      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"
      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="usernameReadonly"
      emit-value
      map-options
      options-dense
      hide-bottom-space
      class="col-3"
      label="ชื่อผู้ใช้งาน (Username)"
      v-model="username"
      :rules="[(val: string) => val.length > 2 || 'กรุณากรอกชื่อผู้ใช้งาน']"
    />
    <q-input
      :dense="dense"
      :outlined="outlined"
      readonly
      hide-bottom-space
      class="col-3"
      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>