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

<script setup lang="ts">
import { dateFormat, parseAndFormatDate } from 'src/utils/datetime';
import { useI18n } from 'vue-i18n';

defineProps<{
  title?: string;
  dense?: boolean;
  outlined?: boolean;
  readonly?: boolean;
  separator?: boolean;
  typeCustomer?: string;
  prefixId: string;
}>();
const { locale } = useI18n();
const branchCode = defineModel<string>('branchCode');
const legalEntityCode = defineModel<string>('legalEntityCode');
const taxNo = defineModel<string | null | undefined>('taxNo');
const customerName = defineModel<string>('customerName');
const customerEnglishName = defineModel<string>('customerEnglishName');
const authorizedCapital = defineModel<string>('authorizedCapital');
const registerName = defineModel<string>('registerName');
const registerDate = defineModel<Date | null>('registerDate');
const branchNo = defineModel<number>('branchNo');
</script>

<template>
  <div class="row">
    <div class="col-3 app-text-muted">• {{ $t(`about`) }}</div>
    <div class="col-9 row q-col-gutter-md">
      <q-input
        :for="`${prefixId}-input-branch-code`"
        :id="`${prefixId}-input-branch-code`"
        v-if="typeCustomer === 'PERS'"
        :dense="dense"
        outlined
        :readonly="true"
        hide-bottom-space
        class="col-3"
        :label="$t('branchCode')"
        v-model="branchCode"
      />

      <q-input
        :for="`${prefixId}-input-branch-no`"
        :id="`${prefixId}-input-branch-no`"
        :dense="dense"
        outlined
        :readonly="!!branchCode"
        hide-bottom-space
        class="col-3"
        label="ลำดับที่"
        v-model="branchNo"
      />

      <q-input
        :for="`${prefixId}-input-customer-name`"
        :id="`${prefixId}-input-customer-name`"
        v-if="typeCustomer === 'PERS'"
        :dense="dense"
        outlined
        :readonly="readonly"
        hide-bottom-space
        class="col"
        :label="$t('customerName')"
        v-model="customerName"
      />

      <q-input
        :for="`${prefixId}-input-customer-english-name`"
        :id="`${prefixId}-input-customer-english-name`"
        v-if="typeCustomer === 'PERS'"
        :dense="dense"
        outlined
        :readonly="readonly"
        hide-bottom-space
        class="col"
        :label="$t('customerEnglishName')"
        v-model="customerEnglishName"
      />

      <div class="row q-col-gutter-md">
        <q-input
          :for="`${prefixId}-input-branch-code`"
          :id="`${prefixId}-input-branch-code`"
          v-if="typeCustomer === 'CORP'"
          :dense="dense"
          outlined
          :readonly="true"
          hide-bottom-space
          class="col-3"
          :label="$t('branchCode')"
          v-model="branchCode"
        />
        <q-input
          :for="`${prefixId}-input-legal-entity-code`"
          :id="`${prefixId}-input-legal-entity-code`"
          v-if="typeCustomer === 'CORP'"
          :dense="dense"
          outlined
          :readonly="true"
          hide-bottom-space
          class="col-3"
          :label="$t('legalEntityCode')"
          v-model="legalEntityCode"
        />

        <q-input
          :for="`${prefixId}-input-customer-english-name`"
          :id="`${prefixId}-input-customer-english-name`"
          v-if="typeCustomer === 'CORP'"
          :dense="dense"
          outlined
          :readonly="readonly"
          hide-bottom-space
          class="col-3"
          :label="$t('customerEnglishName')"
          v-model="customerEnglishName"
        />

        <q-input
          :for="`${prefixId}-input-customer-name`"
          :id="`${prefixId}-input-customer-name`"
          v-if="typeCustomer === 'CORP'"
          :dense="dense"
          outlined
          :readonly="readonly"
          hide-bottom-space
          class="col-3"
          :label="$t('customerName')"
          v-model="customerName"
        />
      </div>

      <q-input
        :for="`${prefixId}-input-tax-no`"
        :id="`${prefixId}-input-tax-no`"
        v-if="typeCustomer === 'CORP'"
        :dense="dense"
        outlined
        :readonly="readonly"
        hide-bottom-space
        class="col-6"
        :label="$t('taxNo')"
        v-model="taxNo"
        :rules="[
          (val) =>
            (val && val.length === 13 && /[0-9]+/.test(val)) ||
            $t('formDialogInputTaxNoValidate'),
        ]"
      />
      <q-input
        :for="`${prefixId}-input-register-name`"
        :id="`${prefixId}-input-register-name`"
        v-if="typeCustomer === 'CORP'"
        :dense="dense"
        outlined
        :readonly="readonly"
        hide-bottom-space
        class="col-6"
        :label="$t('registerName')"
        v-model="registerName"
      />
      <q-input
        :for="`${prefixId}-input-authorized-capital`"
        :id="`${prefixId}-input-authorized-capital`"
        v-if="typeCustomer === 'CORP'"
        :dense="dense"
        outlined
        :readonly="readonly"
        hide-bottom-space
        class="col-3"
        :label="$t('authorizedCapital')"
        v-model="authorizedCapital"
      />
      <VueDatePicker
        :id="`${prefixId}-date-picker-date`"
        v-if="typeCustomer === 'CORP'"
        :teleport="true"
        utc
        autoApply
        v-model="registerDate"
        :dark="$q.dark.isActive"
        :locale="$i18n.locale === 'th-th' ? 'th' : 'en'"
        :enableTimePicker="false"
        :disabled="readonly"
        class="col-3"
      >
        <template #year="{ value }">
          {{ $i18n.locale === 'th-th' ? value + 543 : value }}
        </template>
        <template #year-overlay-value="{ value }">
          {{ $i18n.locale === 'th-th' ? value + 543 : value }}
        </template>
        <template #trigger>
          <q-input
            :for="`${prefixId}-input-start-date`"
            :id="`${prefixId}-input-start-date`"
            :label="$t('registerDate')"
            :dense="dense"
            outlined
            :readonly="readonly"
            placeholder="DD/MM/YYYY"
            :mask="readonly ? '' : '##/##/####'"
            :model-value="
              registerDate && readonly
                ? dateFormat(registerDate)
                : dateFormat(registerDate, false, false, true)
            "
            @update:model-value="
              (v) => {
                if (v && v.toString().length === 10) {
                  registerDate = parseAndFormatDate(v, locale);
                }
              }
            "
          >
            <template v-slot:prepend>
              <q-icon
                size="xs"
                name="mdi-calendar-blank-outline"
                class="cursor-pointer"
                color="primary"
              />
            </template>
            <template v-slot:append>
              <q-icon
                v-if="registerDate && !readonly"
                name="mdi-close"
                class="cursor-pointer"
                size="xs"
                @click="registerDate = undefined"
              />
            </template>
          </q-input>
        </template>
      </VueDatePicker>
    </div>
  </div>
  <q-separator
    v-if="separator"
    class="col-12 q-mt-xl q-mb-md"
    style="padding-block: 0.5px"
  />
</template>

<style></style>