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

<script setup lang="ts">
const employmentOffice = defineModel<string>('employmentOffice');
const bussinessType = defineModel<string>('bussinessType');
const jobPosition = defineModel<string>('jobPosition');

const bussinessTypeEN = defineModel<string>('bussinessTypeEn');
const jobPositionEN = defineModel<string>('jobPositionEn');

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

const payDate = defineModel<string>('payDate');
const wageRate = defineModel<number>('wageRate');

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

const typeBusinessOptions = [
  {
    value: '1',
    label: 'ประเภทบริษัท 1',
  },
  {
    value: '2',
    label: 'ประเภทบริษัท 2',
  },
  {
    value: '3',
    label: 'ประเภทบริษัท 3',
  },
];

const jobPositionOptions = [
  {
    value: '1',
    label: 'ตําแหน่งงาน 1',
  },
  {
    value: '2',
    label: 'ตําแหน่งงาน 2',
  },
  {
    value: '3',
    label: 'ตําแหน่งงาน 3',
  },
];

defineProps<{
  title?: string;
  dense?: boolean;
  outlined?: boolean;
  readonly?: boolean;
  separator?: boolean;
}>();
</script>
<template>
  <div class="col-12 app-text-muted"></div>
  <div class="col-12 row q-col-gutter-y-md">
    <div class="col-3 q-pl-xl app-text-muted">
      {{ $t('businessInformation') }}
    </div>
    <div class="col-9 row q-col-gutter-md">
      <q-input
        :dense="dense"
        :outlined="!readonly"
        :readonly="readonly"
        :borderless="readonly"
        hide-bottom-space
        class="col-12"
        :label="$t('inputCustomerAddress')"
        v-model="employmentOffice"
      />

      <q-select
        emit-value
        option-value="label"
        option-label="label"
        map-options
        :dense="dense"
        :outlined="!readonly"
        :readonly="readonly"
        :borderless="readonly"
        v-model="bussinessType"
        :options="typeBusinessOptions"
        :label="$t('businessType')"
        class="col-6"
      />

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

      <q-select
        emit-value
        option-value="label"
        option-label="label"
        map-options
        :dense="dense"
        :outlined="!readonly"
        :readonly="readonly"
        :borderless="readonly"
        v-model="jobPosition"
        :options="jobPositionOptions"
        :label="$t('jobPosition')"
        class="col-6"
      />

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

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

      <q-input
        :dense="dense"
        :outlined="!readonly"
        :readonly="readonly"
        :borderless="readonly"
        hide-bottom-space
        class="col-3"
        :label="$t('payDay')"
        v-model="payDate"
      >
        <template v-slot:prepend>
          <q-icon
            name="mdi-calendar-blank-outline"
            color="primary"
            class="cursor-pointer"
            size="16px"
          >
            <q-popup-proxy
              cover
              transition-show="scale"
              transition-hide="scale"
            >
              <q-date v-model="payDate" mask="YYYY-MM-DD HH:mm">
                <div class="row items-center justify-end">
                  <q-btn v-close-popup label="Close" color="primary" flat />
                </div>
              </q-date>
            </q-popup-proxy>
          </q-icon>
        </template>
      </q-input>

      <!-- <q-input
        :dense="dense"
        :outlined="!readonly"
        :readonly="readonly"
        :borderless="readonly"
        hide-bottom-space
        class="col-3"
        :label="$t('payDay')"
        v-model="payDay"
      /> -->
      <q-input
        :dense="dense"
        :outlined="!readonly"
        :readonly="readonly"
        :borderless="readonly"
        hide-bottom-space
        class="col-3"
        :label="$t('payRate')"
        v-model="wageRate"
      />

      <q-input
        :dense="dense"
        :outlined="!readonly"
        :readonly="readonly"
        :borderless="readonly"
        hide-bottom-space
        class="col-6"
        :label="$t('salesPerson')"
        v-model="saleEmployee"
      />
    </div>
  </div>
  <q-separator
    v-if="separator"
    class="col-12 q-mb-md"
    style="padding-block: 0.5px; margin-top: 32px"
  />
</template>