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" :hide-dropdown-icon="readonly"
:dense="dense" :dense="dense"
:outlined="!readonly" :outlined="!readonly"
:readonly="readonly" :readonly="readonly || customerBranch !== undefined"
:borderless="readonly" :borderless="readonly"
hide-bottom-space hide-bottom-space
class="col-12" class="col-12"
@ -123,63 +123,140 @@ onMounted(async () => {});
!!val || $t('selectValidate') + $t('formDialogEmployerBranchCode'), !!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"> <template v-slot:option="scope">
<q-item v-bind="scope.itemProps"> <q-item
<div v-if="scope.opt" class="row items-center col-12"> v-if="scope.opt"
<div class="col-4"> v-bind="scope.itemProps"
{{ scope.opt.code }} class="row items-start col-12 no-padding"
</div> >
<div class="col"> <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 }} {{ $i18n.locale === 'en-US' ? scope.opt.nameEN : scope.opt.name }}
</div> </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' $i18n.locale === 'en-US'
? scope.opt.addressEN ? scope.opt.addressEN
: scope.opt.address : 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' $i18n.locale === 'en-US'
? scope.opt.province.nameEN ? scope.opt.province.nameEN
: scope.opt.province.name : scope.opt.province.name
}}) }}
</div> </q-tooltip>
</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
}})
</div> </div>
</div> </div>
</template> </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-select>
<q-input <q-input
for="input-employeeID" for="input-employeeID"
@ -217,4 +294,12 @@ onMounted(async () => {});
/> />
</template> </template>
<style scoped></style> <style scoped lang="scss">
.clear-btn {
opacity: 50%;
transition: opacity 0.2s ease-in-out;
&:hover {
opacity: 100%;
}
}
</style>