jws-frontend/src/components/03_customer-management/BasicInformation.vue

<script setup lang="ts">
import { onMounted, ref } from 'vue';

const customerName = defineModel<string>('customerName');
const customerNameEn = defineModel<string>('customerNameEn');
const taxNo = defineModel<string | null | undefined>('taxNo');

const employerID = defineModel<string>('employerID');

// employee
const customerBranchId = defineModel<string>('customerBranchId');
const employeeId = defineModel<string>('employeeId');
const nrcNo = defineModel<string>('nrcNo');

defineProps<{
  dense?: boolean;
  outlined?: boolean;
  readonly?: boolean;
  separator?: boolean;
  typeCustomer?: string;
  employee?: boolean;

  employeeOwnerOption?: { label: string; value: string }[];
}>();

defineEmits<{
  (e: 'filterOwnerBranch', val: string, update: void): void;
}>();

onMounted(async () => {});
</script>

<template>
  <div class="col-3 app-text-muted">
    • {{ $t(`formDialogTitleInformation`) }}
  </div>
  <div v-if="!employee" class="col-9 row q-col-gutter-md">
    <q-input
      v-if="typeCustomer === 'PERS'"
      :dense="dense"
      :outlined="!readonly"
      :readonly="true"
      :borderless="readonly"
      hide-bottom-space
      class="col-6"
      :label="$t('formDialogEmployerID')"
      v-model="employerID"
    />
    <q-input
      v-if="typeCustomer === 'PERS'"
      :dense="dense"
      :outlined="!readonly"
      :readonly="readonly"
      :borderless="readonly"
      hide-bottom-space
      class="col-6"
      :label="$t('taxNo')"
      v-model="taxNo"
    />

    <q-input
      :dense="dense"
      :outlined="!readonly"
      :readonly="readonly"
      :borderless="readonly"
      hide-bottom-space
      class="col-6"
      :label="$t('corporationThaiName')"
      v-model="customerName"
    />
    <q-input
      :dense="dense"
      :outlined="!readonly"
      :readonly="readonly"
      :borderless="readonly"
      hide-bottom-space
      class="col-6"
      :label="$t('corporationEnglishName')"
      v-model="customerNameEn"
    />
  </div>

  <div v-if="employee" class="col-9 row q-col-gutter-md">
    <q-select
      id="select-employer-branch"
      use-input
      input-debounce="0"
      :hide-dropdown-icon="readonly"
      :dense="dense"
      :outlined="!readonly"
      :readonly="readonly"
      :borderless="readonly"
      hide-bottom-space
      class="col-3"
      :label="$t('formDialogEmployerBranchCode')"
      v-model="customerBranchId"
      option-label="label"
      option-value="value"
      emit-value
      map-options
      :options="employeeOwnerOption"
      @filter="(val, update) => $emit('filterOwnerBranch', val, update)"
      :rules="[
        (val: string) =>
          !!val || $t('selectValidate') + $t('formDialogEmployerBranchCode'),
      ]"
    />
    <q-input
      for="input-employeeID"
      :dense="dense"
      :outlined="!readonly"
      :readonly="true"
      :borderless="readonly"
      hide-bottom-space
      class="col-3"
      :label="$t('formDialogEmployeeID')"
      v-model="employeeId"
    />
    <q-input
      mask="## #### ###### #"
      for="input-nrcNo"
      :dense="dense"
      :outlined="!readonly"
      :readonly="readonly"
      :borderless="readonly"
      hide-bottom-space
      class="col-6"
      :label="$t('formDialogEmployeeNRCNo')"
      v-model="nrcNo"
      :rules="[
        (val: string) =>
          !!val || $t('inputValidate') + $t('formDialogEmployeeNRCNo'),
      ]"
    />
  </div>

  <q-separator
    v-if="separator"
    class="col-12 q-mt-xl q-mb-md"
    style="padding-block: 0.5px"
  />
</template>

<style scoped></style>