refactor: add BasicInformation
This commit is contained in:
Net
parent
17991a1e44
commit
58a99de1e2
1 changed files with 342 additions and 0 deletions
|
|
@ -0,0 +1,342 @@
|
|||
<script setup lang="ts">
|
||||
import { QSelect } from 'quasar';
|
||||
import { CustomerBranch } from 'src/stores/customer/types';
|
||||
import { selectFilterOptionRefMod } from 'src/stores/utils';
|
||||
import { onMounted, ref, watch } from 'vue';
|
||||
|
||||
const optionsBranch = defineModel<{ id: string; name: string }[]>(
|
||||
'optionsBranch',
|
||||
{ default: [] },
|
||||
);
|
||||
|
||||
// employee
|
||||
const customerBranch = defineModel<{
|
||||
id: string;
|
||||
address: string;
|
||||
addressEN: string;
|
||||
provinceId: string;
|
||||
districtId: string;
|
||||
subDistrictId: string;
|
||||
zipCode: string;
|
||||
}>('customerBranch');
|
||||
|
||||
const nrcNo = defineModel<string>('nrcNo');
|
||||
const code = defineModel<string>('code');
|
||||
|
||||
const props = withDefaults(
|
||||
defineProps<{
|
||||
title?: string;
|
||||
dense?: boolean;
|
||||
outlined?: boolean;
|
||||
readonly?: boolean;
|
||||
separator?: boolean;
|
||||
typeCustomer?: string;
|
||||
employee?: boolean;
|
||||
employeeOwnerOption?: CustomerBranch[];
|
||||
prefixId: string;
|
||||
showBtnSave: boolean;
|
||||
}>(),
|
||||
{
|
||||
showBtnSave: false,
|
||||
},
|
||||
);
|
||||
|
||||
defineEmits<{
|
||||
(e: 'filterOwnerBranch', val: string, update: void): void;
|
||||
}>();
|
||||
|
||||
const branchOptions = ref<Record<string, unknown>[]>([]);
|
||||
let branchFilter: (
|
||||
value: string,
|
||||
update: (callbackFn: () => void, afterFn?: (ref: QSelect) => void) => void,
|
||||
) => void;
|
||||
|
||||
watch(
|
||||
() => optionsBranch.value,
|
||||
() => {
|
||||
branchFilter = selectFilterOptionRefMod(
|
||||
optionsBranch,
|
||||
branchOptions,
|
||||
'name',
|
||||
);
|
||||
},
|
||||
);
|
||||
|
||||
onMounted(() => {
|
||||
branchFilter = selectFilterOptionRefMod(optionsBranch, branchOptions, 'name');
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="row col-12">
|
||||
<div class="col-12 row justify-between q-pb-sm text-weight-bold text-body1">
|
||||
<q-icon
|
||||
flat
|
||||
size="xs"
|
||||
class="q-pa-sm rounded q-mr-xs"
|
||||
color="info"
|
||||
name="mdi-office-building-outline"
|
||||
style="background-color: var(--surface-3)"
|
||||
/>
|
||||
{{ $t(`${title}`) }}
|
||||
|
||||
<q-btn
|
||||
dense
|
||||
unelevated
|
||||
id="save-basic-info "
|
||||
color="primary"
|
||||
class="q-px-md q-ml-auto"
|
||||
:label="$t('save')"
|
||||
@click="$emit('save')"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="col-12 row q-col-gutter-md">
|
||||
<q-select
|
||||
lazy-rules="ondemand"
|
||||
:id="`${prefixId}-select-employer-branch`"
|
||||
:for="`${prefixId}-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"
|
||||
style="width: 1px"
|
||||
>
|
||||
<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"
|
||||
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
|
||||
lazy-rules="ondemand"
|
||||
:for="`${prefixId}-input-code`"
|
||||
:dense="dense"
|
||||
outlined
|
||||
hide-bottom-space
|
||||
:readonly="readonly"
|
||||
class="col-3"
|
||||
:label="$t('formDialogEmployeeID')"
|
||||
v-model="code"
|
||||
/>
|
||||
|
||||
<q-input
|
||||
lazy-rules="ondemand"
|
||||
mask="## #### ###### #"
|
||||
:for="`${prefixId}-input-nrc-no`"
|
||||
:dense="dense"
|
||||
outlined
|
||||
hide-bottom-space
|
||||
:readonly="readonly"
|
||||
class="col-6"
|
||||
:label="$t('formDialogEmployeeNRCNo')"
|
||||
v-model="nrcNo"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.clear-btn {
|
||||
opacity: 50%;
|
||||
transition: opacity 0.2s ease-in-out;
|
||||
&:hover {
|
||||
opacity: 100%;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Loading…
Add table
Add a link
Reference in a new issue