383 lines
11 KiB
Vue
383 lines
11 KiB
Vue
<script setup lang="ts">
|
|
import { CustomerBranch } from 'src/stores/customer/types';
|
|
import { onMounted, ref } from 'vue';
|
|
|
|
const personName = defineModel<string>('personName');
|
|
const customerName = defineModel<string>('customerName');
|
|
const customerNameEn = defineModel<string>('customerNameEn');
|
|
const registeredBranchId = defineModel<string>('registeredBranchId');
|
|
const taxNo = defineModel<string | null | undefined>('taxNo');
|
|
|
|
const employerID = defineModel<string>('employerID');
|
|
|
|
// employee
|
|
const customerBranch = defineModel<{
|
|
id: string;
|
|
address: string;
|
|
addressEN: string;
|
|
provinceId: string;
|
|
districtId: string;
|
|
subDistrictId: string;
|
|
zipCode: string;
|
|
}>('customerBranch');
|
|
const employeeId = defineModel<string>('employeeId');
|
|
const nrcNo = defineModel<string>('nrcNo');
|
|
|
|
defineProps<{
|
|
dense?: boolean;
|
|
outlined?: boolean;
|
|
readonly?: boolean;
|
|
separator?: boolean;
|
|
typeCustomer?: string;
|
|
employee?: boolean;
|
|
optionsBranch?: { id: string; name: string }[];
|
|
|
|
employeeOwnerOption?: CustomerBranch[];
|
|
}>();
|
|
|
|
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-select
|
|
id="input-source-nationality"
|
|
:dense="dense"
|
|
outlined
|
|
:readonly="readonly"
|
|
:hide-dropdown-icon="readonly"
|
|
hide-bottom-space
|
|
emit-value
|
|
map-options
|
|
options-dense
|
|
:label="$t('registeredBranch')"
|
|
class="col-12"
|
|
option-label="name"
|
|
option-value="id"
|
|
v-model="registeredBranchId"
|
|
:options="optionsBranch"
|
|
:rules="[(val) => !!val]"
|
|
/>
|
|
|
|
<q-input
|
|
for="input-employer-id"
|
|
id="input-employer-id"
|
|
v-if="typeCustomer === 'PERS'"
|
|
:dense="dense"
|
|
outlined
|
|
:readonly="readonly"
|
|
hide-bottom-space
|
|
class="col-6"
|
|
:label="$t('formDialogCustomerName')"
|
|
v-model="personName"
|
|
/>
|
|
<q-input
|
|
for="input-tax-no"
|
|
id="input-tax-no"
|
|
v-if="typeCustomer === 'PERS'"
|
|
:dense="dense"
|
|
outlined
|
|
:readonly="readonly"
|
|
hide-bottom-space
|
|
class="col-6"
|
|
:label="$t('taxNo')"
|
|
v-model="taxNo"
|
|
/>
|
|
|
|
<q-input
|
|
for="input-customer-name"
|
|
id="input-customer-name"
|
|
:dense="dense"
|
|
outlined
|
|
:readonly="readonly"
|
|
hide-bottom-space
|
|
class="col-6"
|
|
:label="
|
|
$t(typeCustomer === 'PERS' ? 'corporationThai' : 'corporationThaiName')
|
|
"
|
|
v-model="customerName"
|
|
/>
|
|
<q-input
|
|
for="input-customer-name-en"
|
|
id="input-customer-name-en"
|
|
:dense="dense"
|
|
outlined
|
|
:readonly="readonly"
|
|
hide-bottom-space
|
|
class="col-6"
|
|
:label="
|
|
$t(
|
|
typeCustomer === 'PERS'
|
|
? 'corporationEnglish'
|
|
: 'corporationEnglishName',
|
|
)
|
|
"
|
|
v-model="customerNameEn"
|
|
/>
|
|
|
|
<q-input
|
|
v-if="typeCustomer !== 'PERS'"
|
|
for="input-owner-name"
|
|
:dense="dense"
|
|
outlined
|
|
:readonly="readonly"
|
|
hide-bottom-space
|
|
class="col-6"
|
|
:label="$t('companyOwnerName')"
|
|
v-model="personName"
|
|
/>
|
|
</div>
|
|
|
|
<div v-if="employee" class="col-9 row q-col-gutter-md">
|
|
<q-select
|
|
for="select-employer-branch"
|
|
:use-input="!customerBranch"
|
|
input-debounce="0"
|
|
:hide-dropdown-icon="readonly"
|
|
:dense="dense"
|
|
outlined
|
|
:readonly="readonly || customerBranch !== undefined"
|
|
hide-bottom-space
|
|
class="col-12"
|
|
:label="$t('formDialogEmployerBranchCode')"
|
|
v-model="customerBranch"
|
|
:option-value="
|
|
(v) => ({
|
|
id: v.id,
|
|
address: v.address,
|
|
addressEN: v.addressEN,
|
|
provinceId: v.provinceId,
|
|
districtId: v.districtId,
|
|
subDistrictId: v.subDistrictId,
|
|
zipCode: v.zipCode,
|
|
})
|
|
"
|
|
emit-value
|
|
map-options
|
|
:options="employeeOwnerOption"
|
|
@filter="(val, update) => $emit('filterOwnerBranch', val, update)"
|
|
:rules="[
|
|
(val: string) =>
|
|
!!val || $t('selectValidate') + $t('formDialogEmployerBranchCode'),
|
|
]"
|
|
>
|
|
<template v-slot:option="scope">
|
|
<q-item
|
|
v-if="scope.opt"
|
|
v-bind="scope.itemProps"
|
|
class="row items-start col-12 no-padding"
|
|
>
|
|
<div class="q-ma-sm">
|
|
<i class="isax isax-frame5" style="color: var(--brand-1)" />
|
|
</div>
|
|
<div class="q-mt-sm">
|
|
<div>
|
|
{{ scope.opt.code }} {{ $t('branchName') }}:
|
|
{{ $i18n.locale === 'en-US' ? scope.opt.nameEN : scope.opt.name }}
|
|
</div>
|
|
|
|
<div class="text-caption app-text-muted-2 q-mb-xs">
|
|
<div v-if="scope.opt.customer" class="col column">
|
|
<span>
|
|
{{ $t('customerBranchName') }}:
|
|
{{
|
|
$i18n.locale === 'en-US'
|
|
? scope.opt.customer.customerNameEN
|
|
: scope.opt.customer.customerName
|
|
}}
|
|
</span>
|
|
<span>
|
|
{{
|
|
scope.opt.customer.customerType === 'PERS'
|
|
? $t('formDialogCustomerName')
|
|
: $t('companyOwnerName')
|
|
}}:
|
|
{{
|
|
$i18n.locale === 'en-US'
|
|
? scope.opt.customer.personName
|
|
: scope.opt.customer.personName
|
|
}}
|
|
</span>
|
|
</div>
|
|
<div v-if="scope.opt.province" class="col">
|
|
{{ $t('address') }}
|
|
{{
|
|
$i18n.locale === 'en-US'
|
|
? scope.opt.addressEN
|
|
: scope.opt.address
|
|
}}
|
|
{{
|
|
$i18n.locale === 'en-US'
|
|
? scope.opt.subDistrict.nameEN
|
|
: scope.opt.subDistrict.name
|
|
}}
|
|
{{
|
|
$i18n.locale === 'en-US'
|
|
? scope.opt.district.nameEN
|
|
: scope.opt.district.name
|
|
}}
|
|
{{
|
|
$i18n.locale === 'en-US'
|
|
? scope.opt.province.nameEN
|
|
: scope.opt.province.name
|
|
}}
|
|
{{ scope.opt.zipCode }}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</q-item>
|
|
<q-separator class="q-mx-sm" />
|
|
</template>
|
|
|
|
<template v-slot:selected-item="scope">
|
|
<div v-if="scope.opt" class="row items-center no-wrap">
|
|
<div class="q-mr-sm">
|
|
{{ scope.opt.code }}
|
|
|
|
{{ $t('branchName') }}:
|
|
{{ $i18n.locale === 'en-US' ? scope.opt.nameEN : scope.opt.name }}
|
|
</div>
|
|
<div
|
|
class="text-caption app-text-muted-2 ellipsis col"
|
|
style="max-width: 26vw"
|
|
v-if="scope.opt.customer && scope.opt.province"
|
|
>
|
|
{{ $t('customerBranchName') }}:
|
|
{{
|
|
$i18n.locale === 'en-US'
|
|
? scope.opt.customer.customerNameEN
|
|
: scope.opt.customer.customerName
|
|
}}
|
|
{{
|
|
scope.opt.customer.customerType === 'PERS'
|
|
? $t('formDialogCustomerName')
|
|
: $t('companyOwnerName')
|
|
}}:
|
|
{{
|
|
$i18n.locale === 'en-US'
|
|
? scope.opt.customer.personName
|
|
: scope.opt.customer.personName
|
|
}}
|
|
{{ $t('address') }}
|
|
{{
|
|
$i18n.locale === 'en-US' ? scope.opt.addressEN : scope.opt.address
|
|
}}
|
|
{{
|
|
$i18n.locale === 'en-US'
|
|
? scope.opt.subDistrict.nameEN
|
|
: scope.opt.subDistrict.name
|
|
}}
|
|
{{
|
|
$i18n.locale === 'en-US'
|
|
? scope.opt.district.nameEN
|
|
: scope.opt.district.name
|
|
}}
|
|
{{
|
|
$i18n.locale === 'en-US'
|
|
? scope.opt.province.nameEN
|
|
: scope.opt.province.name
|
|
}}
|
|
{{ scope.opt.zipCode }}
|
|
<q-tooltip v-if="scope.opt.customer && scope.opt.province">
|
|
{{ $t('customerBranchName') }}:
|
|
{{
|
|
$i18n.locale === 'en-US'
|
|
? scope.opt.customer.customerNameEN
|
|
: scope.opt.customer.customerName
|
|
}}
|
|
{{
|
|
scope.opt.customer.customerType === 'PERS'
|
|
? $t('formDialogCustomerName')
|
|
: $t('companyOwnerName')
|
|
}}:
|
|
{{
|
|
$i18n.locale === 'en-US'
|
|
? scope.opt.customer.personName
|
|
: scope.opt.customer.personName
|
|
}}
|
|
{{ $t('address') }}
|
|
{{
|
|
$i18n.locale === 'en-US'
|
|
? scope.opt.addressEN
|
|
: scope.opt.address
|
|
}}
|
|
{{
|
|
$i18n.locale === 'en-US'
|
|
? scope.opt.subDistrict.nameEN
|
|
: scope.opt.subDistrict.name
|
|
}}
|
|
{{
|
|
$i18n.locale === 'en-US'
|
|
? scope.opt.district.nameEN
|
|
: scope.opt.district.name
|
|
}}
|
|
{{
|
|
$i18n.locale === 'en-US'
|
|
? scope.opt.province.nameEN
|
|
: scope.opt.province.name
|
|
}}
|
|
{{ scope.opt.zipCode }}
|
|
</q-tooltip>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<template v-slot:append>
|
|
<q-icon
|
|
v-if="!readonly && customerBranch"
|
|
name="mdi-close-circle"
|
|
@click.stop="customerBranch = undefined"
|
|
class="cursor-pointer clear-btn"
|
|
/>
|
|
</template>
|
|
</q-select>
|
|
<q-input
|
|
for="input-employeeID"
|
|
:dense="dense"
|
|
outlined
|
|
:readonly="true"
|
|
hide-bottom-space
|
|
class="col-6"
|
|
:label="$t('formDialogEmployeeID')"
|
|
v-model="employeeId"
|
|
/>
|
|
<q-input
|
|
mask="## #### ###### #"
|
|
for="input-nrcNo"
|
|
:dense="dense"
|
|
outlined
|
|
:readonly="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 lang="scss">
|
|
.clear-btn {
|
|
opacity: 50%;
|
|
transition: opacity 0.2s ease-in-out;
|
|
&:hover {
|
|
opacity: 100%;
|
|
}
|
|
}
|
|
</style>
|