chamomind/jws-frontend
chamomind/jws-frontend
7
0
Fork 0
Code Issues Projects Releases Packages 1 Wiki Activity Actions

fix: employee customer branch id

Browse source
This commit is contained in:
puriphatt 2024-06-14 11:04:57 +00:00
parent 513d90a34c
commit 59976f6e61
1 changed files with 130 additions and 45 deletions
Download patch file Download diff file Expand all files Collapse all files

175
src/components/03_customer-management/BasicInformation.vue
View file

@ -97,7 +97,7 @@ onMounted(async () => {});
:hide-dropdown-icon="readonly"
:dense="dense"
:outlined="!readonly"
:readonly="readonly"
:readonly="readonly || customerBranch !== undefined"
:borderless="readonly"
hide-bottom-space
class="col-12"
@ -123,63 +123,140 @@ onMounted(async () => {});
!!val || $t('selectValidate') + $t('formDialogEmployerBranchCode'),
]"
>
<template v-slot:before-options>
<q-item>
<div
class="row items-center col-12 app-text-muted text-weight-medium"
>
<div class="col-4">{{ $t('branchCode') }}</div>
<div class="col">{{ $t('name') }}</div>
<div class="col">{{ $t('address') }}</div>
</div>
</q-item>
</template>
<template v-slot:option="scope">
<q-item v-bind="scope.itemProps">
<div v-if="scope.opt" class="row items-center col-12">
<div class="col-4">
{{ scope.opt.code }}
</div>
<div class="col">
<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 v-if="scope.opt.province" class="col">
<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>
</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
}}
</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">
<div>
{{ scope.opt.code }}
</div>
<div>
{{ $t('branchName') }}:
{{ $i18n.locale === 'en-US' ? scope.opt.nameEN : scope.opt.name }}
</div>
<div
class="text-caption app-text-muted-2 ellipsis q-ml-sm"
style="max-width: 25vw; min-width: 0"
>
{{ $t('customerBranchName') }}:
{{
$i18n.locale === 'en-US'
? scope.opt.customer.customerNameEN
: scope.opt.customer.customerName
}}
{{ $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
}}
<q-tooltip>
{{ $t('customerBranchName') }}:
{{
$i18n.locale === 'en-US'
? scope.opt.customer.customerNameEN
: scope.opt.customer.customerName
}}
{{ $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
}})
</div>
</div>
</q-item>
</template>
<template v-slot:selected-item="scope">
<div v-if="scope.opt" class="row items-center col-12">
<div class="col-4">
{{ scope.opt.code }}
</div>
<div class="col">
{{ $i18n.locale === 'en-US' ? scope.opt.nameEN : scope.opt.name }}
</div>
<div v-if="scope.opt.province" class="col">
{{
$i18n.locale === 'en-US' ? scope.opt.addressEN : scope.opt.address
}}
({{
$i18n.locale === 'en-US'
? scope.opt.province.nameEN
: scope.opt.province.name
}})
}}
</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"
@ -217,4 +294,12 @@ onMounted(async () => {});
/>
</template>
<style scoped></style>
<style scoped lang="scss">
.clear-btn {
opacity: 50%;
transition: opacity 0.2s ease-in-out;
&:hover {
opacity: 100%;
}
}
</style>