refactor: change form employee
Some checks failed
Spell Check / Spell Check with Typos (push) Failing after 6s
Some checks failed
Spell Check / Spell Check with Typos (push) Failing after 6s
This commit is contained in:
Thanaphon Frappet
parent
7fcb4d7744
commit
bd38c008a6
9 changed files with 1686 additions and 703 deletions
|
|
@ -3,6 +3,7 @@ import { QSelect } from 'quasar';
|
|||
import { CustomerBranch } from 'stores/customer/types';
|
||||
import { selectFilterOptionRefMod } from 'stores/utils';
|
||||
import { onMounted, ref, watch } from 'vue';
|
||||
import SelectCustomer from 'components/shared/select/SelectCustomer.vue';
|
||||
import {
|
||||
EditButton,
|
||||
DeleteButton,
|
||||
|
|
@ -22,6 +23,13 @@ const optionsBranch = defineModel<{ id: string; name: string }[]>(
|
|||
);
|
||||
|
||||
// employee
|
||||
|
||||
const customerBranchId = defineModel<string>('customerBranchId');
|
||||
|
||||
const currentCustomerBranch = defineModel<CustomerBranch>(
|
||||
'currentCustomerBranch',
|
||||
);
|
||||
|
||||
const customerBranch = defineModel<{
|
||||
id: string;
|
||||
address: string;
|
||||
|
|
@ -108,213 +116,14 @@ defineEmits<{
|
|||
</div>
|
||||
|
||||
<div class="col-12 row" style="gap: var(--size-2)">
|
||||
<q-select
|
||||
:id="`${prefixId}-select-employer-branch`"
|
||||
:for="`${prefixId}-select-employer-branch`"
|
||||
:use-input="!customerBranch"
|
||||
autocomplete="off"
|
||||
input-debounce="0"
|
||||
:hide-dropdown-icon="readonly"
|
||||
:dense="dense"
|
||||
outlined
|
||||
:readonly="readonly"
|
||||
hide-bottom-space
|
||||
class="col-12"
|
||||
<SelectCustomer
|
||||
v-model:value="customerBranchId"
|
||||
v-model:value-option="currentCustomerBranch"
|
||||
:label="$t('customer.form.branchCode')"
|
||||
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('form.error.selectField', {
|
||||
field: $t('customerEmployee.branch'),
|
||||
}),
|
||||
]"
|
||||
>
|
||||
<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>
|
||||
<span v-if="scope.opt.customer.customerType">
|
||||
<span style="font-weight: 600">
|
||||
{{
|
||||
scope.opt.customer.customerType === 'CORP'
|
||||
? $t('customer.form.registerName')
|
||||
: $t('customer.form.ownerName')
|
||||
}}:
|
||||
</span>
|
||||
{{
|
||||
scope.opt.customer.customerType === 'CORP'
|
||||
? $i18n.locale === 'eng'
|
||||
? scope.opt.registerNameEN
|
||||
: scope.opt.registerName
|
||||
: $i18n.locale === 'eng'
|
||||
? `${optionStore.mapOption(scope.opt.namePrefix)} ${scope.opt.firstNameEN} ${scope.opt.lastNameEN}` ||
|
||||
'-'
|
||||
: `${optionStore.mapOption(scope.opt.namePrefix)} ${scope.opt.firstName} ${scope.opt.lastName}` ||
|
||||
'-'
|
||||
}}
|
||||
({{ scope.opt.code }})
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div class="text-caption app-text-muted-2 q-mb-xs">
|
||||
<span v-if="scope.opt.customer" class="col column">
|
||||
{{
|
||||
$t(
|
||||
`branch.form.title.${scope.opt.code.endsWith('-00') ? 'branchHQLabel' : 'branchLabel'}`,
|
||||
)
|
||||
}}
|
||||
|
||||
{{
|
||||
!scope.opt.code.endsWith('-00')
|
||||
? +scope.opt.code.split('-')[1]
|
||||
: ''
|
||||
}}
|
||||
</span>
|
||||
<span v-if="scope.opt.province" class="col">
|
||||
{{ $t('general.address') }}
|
||||
{{
|
||||
formatAddress({
|
||||
address: scope.opt.address,
|
||||
addressEN: scope.opt.addressEN,
|
||||
moo: scope.opt.moo,
|
||||
mooEN: scope.opt.mooEN,
|
||||
soi: scope.opt.soi,
|
||||
soiEN: scope.opt.soiEN,
|
||||
street: scope.opt.street,
|
||||
streetEN: scope.opt.streetEN,
|
||||
subDistrict: scope.opt.subDistrict,
|
||||
district: scope.opt.district,
|
||||
province: scope.opt.province,
|
||||
en: $i18n.locale === 'eng',
|
||||
})
|
||||
}}
|
||||
{{ scope.opt.subDistrict?.zipCode || '' }}
|
||||
</span>
|
||||
</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"
|
||||
style="width: 1px"
|
||||
>
|
||||
<div class="q-mr-sm">
|
||||
<span style="font-weight: 600">
|
||||
{{
|
||||
scope.opt.customer.customerType === 'CORP'
|
||||
? $t('customer.form.registerName')
|
||||
: $t('customer.form.ownerName')
|
||||
}}:
|
||||
</span>
|
||||
{{
|
||||
scope.opt.customer.customerType === 'CORP'
|
||||
? $i18n.locale === 'eng'
|
||||
? scope.opt.registerNameEN
|
||||
: scope.opt.registerName
|
||||
: $i18n.locale === 'eng'
|
||||
? `${optionStore.mapOption(scope.opt.namePrefix)} ${scope.opt.firstNameEN} ${scope.opt.lastNameEN}` ||
|
||||
'-'
|
||||
: `${optionStore.mapOption(scope.opt.namePrefix)} ${scope.opt.firstName} ${scope.opt.lastName}` ||
|
||||
'-'
|
||||
}}
|
||||
({{ scope.opt.code }})
|
||||
</div>
|
||||
<div
|
||||
class="text-caption app-text-muted-2"
|
||||
v-if="scope.opt.customer && scope.opt.province"
|
||||
>
|
||||
{{
|
||||
$t(
|
||||
`branch.form.title.${scope.opt.code.endsWith('-00') ? 'branchHQLabel' : 'branchLabel'}`,
|
||||
)
|
||||
}}
|
||||
|
||||
{{
|
||||
!scope.opt.code.endsWith('-00')
|
||||
? +scope.opt.code.split('-')[1]
|
||||
: ''
|
||||
}}
|
||||
|
||||
{{ $t('general.address') }}
|
||||
{{
|
||||
formatAddress({
|
||||
address: scope.opt.address,
|
||||
addressEN: scope.opt.addressEN,
|
||||
moo: scope.opt.moo,
|
||||
mooEN: scope.opt.mooEN,
|
||||
soi: scope.opt.soi,
|
||||
soiEN: scope.opt.soiEN,
|
||||
street: scope.opt.street,
|
||||
streetEN: scope.opt.streetEN,
|
||||
subDistrict: scope.opt.subDistrict,
|
||||
district: scope.opt.district,
|
||||
province: scope.opt.province,
|
||||
en: $i18n.locale === 'eng',
|
||||
})
|
||||
}}
|
||||
{{ scope.opt.subDistrict?.zipCode || '' }}
|
||||
<q-tooltip v-if="scope.opt.customer && scope.opt.province">
|
||||
{{ $t('customerBranch.form.title') }}:
|
||||
|
||||
{{ $t('general.address') }}
|
||||
{{
|
||||
formatAddress({
|
||||
address: scope.opt.address,
|
||||
addressEN: scope.opt.addressEN,
|
||||
moo: scope.opt.moo,
|
||||
mooEN: scope.opt.mooEN,
|
||||
soi: scope.opt.soi,
|
||||
soiEN: scope.opt.soiEN,
|
||||
street: scope.opt.street,
|
||||
streetEN: scope.opt.streetEN,
|
||||
subDistrict: scope.opt.subDistrict,
|
||||
district: scope.opt.district,
|
||||
province: scope.opt.province,
|
||||
en: $i18n.locale === 'eng',
|
||||
})
|
||||
}}
|
||||
{{ scope.opt.subDistrict?.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>
|
||||
class="col-12 field-two"
|
||||
required
|
||||
:readonly
|
||||
/>
|
||||
|
||||
<q-input
|
||||
:for="`${prefixId}-input-code`"
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue