refactor: customer
This commit is contained in:
puriphatt
parent
e50904bead
commit
f2b318060e
11 changed files with 596 additions and 355 deletions
|
|
@ -28,6 +28,7 @@ import {
|
|||
} from 'components/button';
|
||||
|
||||
import { AddressForm } from 'components/form';
|
||||
import BranchCard from 'src/components/01_branch-management/BranchCard.vue';
|
||||
import ItemCard from 'src/components/ItemCard.vue';
|
||||
import DrawerInfo from 'components/DrawerInfo.vue';
|
||||
import ButtonAddComponent from 'components/ButtonAddCompoent.vue';
|
||||
|
|
@ -87,12 +88,32 @@ const ocrStore = useOcrStore();
|
|||
const tabFieldRequired = ref<{ [key: string]: (keyof CustomerBranchCreate)[] }>(
|
||||
{
|
||||
main: [],
|
||||
address: ['address', 'addressEN', 'provinceId', 'districtId'],
|
||||
business: [],
|
||||
contact: ['contactName', 'telephoneNo'],
|
||||
business: ['businessType', 'jobPosition'],
|
||||
address: [
|
||||
'homeCode',
|
||||
'address',
|
||||
'addressEN',
|
||||
'provinceId',
|
||||
'districtId',
|
||||
'subDistrictId',
|
||||
],
|
||||
contact: [],
|
||||
},
|
||||
);
|
||||
|
||||
const formMenuIcon = ref<{ icon: string; color: string; bgColor: string }[]>([
|
||||
{
|
||||
icon: 'mdi-office-building-outline',
|
||||
color: 'hsl(var(--info-bg))',
|
||||
bgColor: 'var(--surface-1)',
|
||||
},
|
||||
{
|
||||
icon: 'mdi-briefcase-outline',
|
||||
color: 'hsl(var(--info-bg))',
|
||||
bgColor: 'var(--surface-1)',
|
||||
},
|
||||
]);
|
||||
|
||||
const { state: customerFormState, currentFormData: customerFormData } =
|
||||
storeToRefs(customerFormStore);
|
||||
const { state: employeeFormState, currentFromDataEmployee } =
|
||||
|
|
@ -163,8 +184,8 @@ const customerTypeSelected = ref<{
|
|||
const customerNameInfo = computed(() => {
|
||||
const name =
|
||||
locale.value === 'eng'
|
||||
? `${customerFormData.value.customerBranch[0].firstNameEN} ${customerFormData.value.customerBranch[0].lastNameEN}`
|
||||
: `${customerFormData.value.customerBranch[0].firstName} ${customerFormData.value.customerBranch[0].lastName}`;
|
||||
? `${customerFormData.value.customerBranch[0]?.firstNameEN} ${customerFormData.value.customerBranch[0]?.lastNameEN}`
|
||||
: `${customerFormData.value.customerBranch[0]?.firstName} ${customerFormData.value.customerBranch[0]?.lastName}`;
|
||||
return name || '-';
|
||||
});
|
||||
const currentBtnOpen = ref<boolean[]>([]);
|
||||
|
|
@ -447,7 +468,12 @@ async function toggleStatusEmployee(id: string, status: boolean) {
|
|||
}
|
||||
|
||||
async function toggleStatusCustomer(id: string, status: boolean) {
|
||||
await customerStore.editById(id, { status: !status ? 'ACTIVE' : 'INACTIVE' });
|
||||
const res = await customerStore.editById(id, {
|
||||
status: !status ? 'ACTIVE' : 'INACTIVE',
|
||||
});
|
||||
if (res && customerFormState.value.drawerModal)
|
||||
customerFormData.value.status = res.status;
|
||||
|
||||
await fetchListCustomer();
|
||||
flowStore.rotate();
|
||||
}
|
||||
|
|
@ -495,7 +521,7 @@ async function openHistory(id: string) {
|
|||
employeeHistoryDialog.value = true;
|
||||
}
|
||||
|
||||
async function editCustomerForm(id: string, view?: boolean) {
|
||||
async function editCustomerForm(id: string) {
|
||||
await customerFormStore.assignFormData(id);
|
||||
await fetchListOfOptionBranch();
|
||||
await fetchImageList(
|
||||
|
|
@ -913,6 +939,7 @@ const emptyCreateDialog = ref(false);
|
|||
:class="{ 'q-pt-xs': $q.screen.lt.md }"
|
||||
style="white-space: nowrap"
|
||||
>
|
||||
<!-- :class="{ 'offset-md-5': gridView }" -->
|
||||
<q-select
|
||||
id="select-status"
|
||||
for="select-status"
|
||||
|
|
@ -922,7 +949,6 @@ const emptyCreateDialog = ref(false);
|
|||
option-value="value"
|
||||
option-label="label"
|
||||
class="col"
|
||||
:class="{ 'offset-md-5': gridView }"
|
||||
map-options
|
||||
emit-value
|
||||
:hide-dropdown-icon="$q.screen.lt.sm"
|
||||
|
|
@ -932,9 +958,9 @@ const emptyCreateDialog = ref(false);
|
|||
{ label: $t('status.INACTIVE'), value: 'INACTIVE' },
|
||||
]"
|
||||
></q-select>
|
||||
<!-- v-if="gridView === false" -->
|
||||
<q-select
|
||||
id="select-field"
|
||||
v-if="gridView === false"
|
||||
for="select-field"
|
||||
class="q-ml-sm col"
|
||||
:options="
|
||||
|
|
@ -1201,7 +1227,7 @@ const emptyCreateDialog = ref(false);
|
|||
}}
|
||||
</q-td>
|
||||
|
||||
<q-td v-if="fieldSelected.includes('customerName')">
|
||||
<q-td v-if="fieldSelected.includes('fullname')">
|
||||
<div class="row items-center">
|
||||
<div
|
||||
class="q-mr-sm"
|
||||
|
|
@ -1238,19 +1264,19 @@ const emptyCreateDialog = ref(false);
|
|||
<div class="col">
|
||||
{{
|
||||
props.row.customerType === 'CORP'
|
||||
? props.row.branch[0].registerName || '-'
|
||||
: props.row.branch[0].firstName +
|
||||
? props.row.branch[0]?.registerName || '-'
|
||||
: props.row.branch[0]?.firstName +
|
||||
' ' +
|
||||
props.row.branch[0].lastName || '-'
|
||||
props.row.branch[0]?.lastName || '-'
|
||||
}}
|
||||
</div>
|
||||
<div class="col app-text-muted">
|
||||
{{
|
||||
props.row.customerType === 'CORP'
|
||||
? props.row.branch[0].registerNameEN || '-'
|
||||
: props.row.branch[0].firstNameEN +
|
||||
? props.row.branch[0]?.registerNameEN || '-'
|
||||
: props.row.branch[0]?.firstNameEN +
|
||||
' ' +
|
||||
props.row.branch[0].lastNameEN || '-'
|
||||
props.row.branch[0]?.lastNameEN || '-'
|
||||
}}
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -1268,41 +1294,23 @@ const emptyCreateDialog = ref(false);
|
|||
}}
|
||||
</q-td>
|
||||
|
||||
<q-td v-if="fieldSelected.includes('address')">
|
||||
<q-td v-if="fieldSelected.includes('jobPosition')">
|
||||
{{
|
||||
props.row.branch.length !== 0
|
||||
? props.row.branch[0].address !== null
|
||||
? props.row.branch[0].address
|
||||
? props.row.branch[0].jobPosition !== null
|
||||
? optionStore.mapOption(
|
||||
props.row.branch[0].jobPosition,
|
||||
)
|
||||
: ''
|
||||
: '-'
|
||||
}}
|
||||
</q-td>
|
||||
|
||||
<q-td v-if="fieldSelected.includes('workPlace')">
|
||||
<q-td v-if="fieldSelected.includes('officeTel')">
|
||||
{{
|
||||
props.row.branch.length !== 0
|
||||
? props.row.branch[0].workplace !== null
|
||||
? props.row.branch[0].workplace
|
||||
: ''
|
||||
: '-'
|
||||
}}
|
||||
</q-td>
|
||||
|
||||
<q-td v-if="fieldSelected.includes('contactName')">
|
||||
{{
|
||||
props.row.branch.length !== 0
|
||||
? props.row.branch[0].contactName !== null
|
||||
? props.row.branch[0].contactName
|
||||
: ''
|
||||
: '-'
|
||||
}}
|
||||
</q-td>
|
||||
|
||||
<q-td v-if="fieldSelected.includes('contactPhone')">
|
||||
{{
|
||||
props.row.branch.length !== 0
|
||||
? props.row.branch[0].telephoneNo !== null
|
||||
? props.row.branch[0].telephoneNo
|
||||
? props.row.branch[0].officeTel !== null
|
||||
? props.row.branch[0].officeTel
|
||||
: ''
|
||||
: '-'
|
||||
}}
|
||||
|
|
@ -1353,7 +1361,7 @@ const emptyCreateDialog = ref(false);
|
|||
dense
|
||||
round
|
||||
flat
|
||||
@click.stop="editCustomerForm(props.row.id, true)"
|
||||
@click.stop="editCustomerForm(props.row.id)"
|
||||
/>
|
||||
|
||||
<KebabAction
|
||||
|
|
@ -1363,14 +1371,13 @@ const emptyCreateDialog = ref(false);
|
|||
() => {
|
||||
const { branch, ...payload } = props.row;
|
||||
currentCustomer = payload;
|
||||
editCustomerForm(props.row.id, true);
|
||||
editCustomerForm(props.row.id);
|
||||
}
|
||||
"
|
||||
@edit="
|
||||
async () => {
|
||||
await editCustomerForm(props.row.id);
|
||||
customerFormState.dialogType = 'edit';
|
||||
customerFormState.readonly = false;
|
||||
customerFormState.branchIndex = 0;
|
||||
}
|
||||
"
|
||||
@delete="deleteCustomerById(props.row.id)"
|
||||
|
|
@ -1433,84 +1440,149 @@ const emptyCreateDialog = ref(false);
|
|||
</template>
|
||||
|
||||
<template v-slot:item="props">
|
||||
<div class="col-12 col-md-3 col-sm-6">
|
||||
<PersonCard
|
||||
:id="`card-${props.row.customerName}`"
|
||||
:field-selected="fieldSelected"
|
||||
separateEnter
|
||||
history
|
||||
:prefix-id="
|
||||
props.row.customerNameEN ?? String(props.rowIndex)
|
||||
"
|
||||
:data="{
|
||||
code: props.row.code,
|
||||
name:
|
||||
$i18n.locale === 'eng'
|
||||
? props.row.customerType === 'CORP'
|
||||
? props.row.branch[0].registerNameEN || '-'
|
||||
: props.row.branch[0].firstNameEN +
|
||||
' ' +
|
||||
props.row.branch[0].lastNameEN || '-'
|
||||
: props.row.customerType === 'CORP'
|
||||
? props.row.branch[0].registerName || '-'
|
||||
: props.row.branch[0].firstName +
|
||||
' ' +
|
||||
props.row.branch[0].lastName || '-',
|
||||
img: `${baseUrl}/customer/${props.row.id}/image/${props.row.selectedImage}`,
|
||||
fallbackImg: `/images/customer-${props.row.customerType}-avartar-${props.row.customerType === 'PERS' ? props.row.branch[0].gender : 'male'}.png`,
|
||||
male: undefined,
|
||||
female: undefined,
|
||||
detail: [
|
||||
{
|
||||
icon: 'mdi-phone-outline',
|
||||
value: props.row.branch[0]?.telephoneNo || '-',
|
||||
},
|
||||
{
|
||||
icon: 'mdi-account-outline',
|
||||
value: props.row.personName || '-',
|
||||
},
|
||||
],
|
||||
<div class="col-12 col-md-6">
|
||||
<BranchCard
|
||||
i18nKey="customer.table"
|
||||
class="surface-1"
|
||||
:virtual-branch="props.row.virtual"
|
||||
:id="`branch-card-${props.row.name}`"
|
||||
:class="{
|
||||
'cursor-pointer': props.row._count.branch !== 0,
|
||||
}"
|
||||
:tag="[
|
||||
{
|
||||
color:
|
||||
{
|
||||
CORP: 'purple',
|
||||
PERS: 'green',
|
||||
}[props.row.customerType as string] || 'CORP',
|
||||
value: $t(
|
||||
props.row.customerType === 'CORP'
|
||||
? 'customer.employerLegalEntity'
|
||||
: 'customer.employerNaturalPerson',
|
||||
),
|
||||
},
|
||||
]"
|
||||
:disabled="props.row.status === 'INACTIVE'"
|
||||
@history="openHistory(props.row.id)"
|
||||
@update-card="
|
||||
async () => {
|
||||
await editCustomerForm(props.row.id);
|
||||
customerFormState.dialogType = 'edit';
|
||||
customerFormState.readonly = false;
|
||||
}
|
||||
"
|
||||
@enter-card="
|
||||
@click="
|
||||
$router.push(
|
||||
`/customer-management/${props.row.id}/branch`,
|
||||
)
|
||||
"
|
||||
@view-card="
|
||||
() => {
|
||||
const { branch, ...payload } = props.row;
|
||||
currentCustomer = payload;
|
||||
editCustomerForm(props.row.id, true);
|
||||
}
|
||||
:metadata="props.row"
|
||||
:color="
|
||||
props.row.customerType === 'CORP'
|
||||
? 'hq'
|
||||
: 'br-virtual'
|
||||
"
|
||||
@delete-card="deleteCustomerById(props.row.id)"
|
||||
@toggle-status="
|
||||
triggerChangeStatus(props.row.id, props.row.status)
|
||||
:key="props.row.id"
|
||||
:data="{
|
||||
branchLabelName:
|
||||
props.row.customerType === 'CORP'
|
||||
? $i18n.locale === 'eng'
|
||||
? props.row.branch[0]?.registerNameEN || '-'
|
||||
: props.row.branch[0]?.registerName || '-'
|
||||
: $i18n.locale === 'eng'
|
||||
? props.row.branch[0]?.firstNameEN +
|
||||
' ' +
|
||||
props.row.branch[0]?.lastNameEN || '-'
|
||||
: props.row.branch[0]?.firstName +
|
||||
' ' +
|
||||
props.row.branch[0]?.lastName || '-',
|
||||
taxNo: 'asdasd',
|
||||
branchLabelTel: 'asdas',
|
||||
contactName: 'zxczxcz',
|
||||
branchImgUrl: `/customer/${props.row.id}/image/${props.row.selectedImage}`,
|
||||
}"
|
||||
:badge-field="['branchLabelStatus']"
|
||||
:inactive="props.row.status === 'INACTIVE'"
|
||||
:field-selected="
|
||||
fieldSelected.filter((v) => {
|
||||
return columnsCustomer.some((c) => c.name === v);
|
||||
})
|
||||
"
|
||||
></PersonCard>
|
||||
>
|
||||
<template #image>
|
||||
<q-avatar size="3rem">
|
||||
<q-img
|
||||
:src="`${baseUrl}/customer/${props.row.id}/image/${props.row.selectedImage}`"
|
||||
class="full-height full-width"
|
||||
>
|
||||
<template #error>
|
||||
<q-img
|
||||
:src="`/images/customer-${props.row.customerType}-avartar-${props.row.customerType === 'PERS' ? props.row.branch[0].gender : 'male'}.png`"
|
||||
/>
|
||||
</template>
|
||||
</q-img>
|
||||
<q-badge
|
||||
class="absolute-bottom-right no-padding"
|
||||
style="
|
||||
border-radius: 50%;
|
||||
min-width: 11.31px;
|
||||
min-height: 11.31px;
|
||||
"
|
||||
:style="{
|
||||
background: `var(--${props.row.status === 'INACTIVE' ? 'stone-5' : 'green-6'})`,
|
||||
}"
|
||||
></q-badge>
|
||||
</q-avatar>
|
||||
</template>
|
||||
<template #data>
|
||||
<div
|
||||
class="row"
|
||||
style="
|
||||
display: flex;
|
||||
padding-block: var(--size-2);
|
||||
"
|
||||
>
|
||||
<div
|
||||
class="col-12 q-py-sm row"
|
||||
v-for="key in fieldSelected
|
||||
.filter((v) => {
|
||||
return columnsCustomer.some(
|
||||
(c) => c.name === v,
|
||||
);
|
||||
})
|
||||
.filter((v) => {
|
||||
return (
|
||||
v !== 'orderNumber' && v !== 'fullname'
|
||||
);
|
||||
})"
|
||||
:key="key"
|
||||
>
|
||||
<span class="col-4 app-text-muted">
|
||||
{{ $t(`customer.table.${key}`) }}
|
||||
</span>
|
||||
<span class="col">
|
||||
{{
|
||||
key === 'businessTypePure'
|
||||
? optionStore.mapOption(
|
||||
props.row.branch[0].businessType,
|
||||
)
|
||||
: key === 'jobPosition'
|
||||
? optionStore.mapOption(
|
||||
props.row.branch[0].jobPosition,
|
||||
)
|
||||
: key === 'officeTel'
|
||||
? props.row.branch[0].officeTel
|
||||
: ''
|
||||
}}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<template v-slot:action>
|
||||
<KebabAction
|
||||
:status="props.row.status"
|
||||
:idName="props.row.name"
|
||||
@view="
|
||||
() => {
|
||||
const { branch, ...payload } = props.row;
|
||||
currentCustomer = payload;
|
||||
editCustomerForm(props.row.id);
|
||||
}
|
||||
"
|
||||
@edit="
|
||||
async () => {
|
||||
await editCustomerForm(props.row.id);
|
||||
customerFormState.branchIndex = 0;
|
||||
}
|
||||
"
|
||||
@delete="deleteCustomerById(props.row.id)"
|
||||
@change-status="
|
||||
triggerChangeStatus(
|
||||
props.row.id,
|
||||
props.row.status,
|
||||
)
|
||||
"
|
||||
/>
|
||||
</template>
|
||||
</BranchCard>
|
||||
</div>
|
||||
</template>
|
||||
</q-table>
|
||||
|
|
@ -1746,9 +1818,18 @@ const emptyCreateDialog = ref(false);
|
|||
<BranchPage
|
||||
v-if="currentCustomer"
|
||||
:customer-type="currentCustomer.customerType"
|
||||
:current-customer-name="`${currentCustomer.firstName} ${currentCustomer.lastName}`"
|
||||
:current-customer-name="
|
||||
currentCustomer.customerType === 'PERS'
|
||||
? locale === 'eng'
|
||||
? `${currentCustomer.branch[0]?.firstNameEN} ${currentCustomer.branch[0]?.lastNameEN}`
|
||||
: `${currentCustomer.branch[0]?.firstName} ${currentCustomer.branch[0]?.lastName}`
|
||||
: locale === 'eng'
|
||||
? currentCustomer.branch[0]?.registerNameEN
|
||||
: currentCustomer.branch[0]?.registerName
|
||||
"
|
||||
:count-employee="currentCustomer._count.employee"
|
||||
:gender="currentCustomer.gender"
|
||||
:selected-image="currentCustomer.selectedImage"
|
||||
:gender="currentCustomer.branch[0]?.gender"
|
||||
v-model:customer-id="currentCustomer.id"
|
||||
v-model:mode-view="gridView"
|
||||
@back="$router.push('/customer-management')"
|
||||
|
|
@ -1815,9 +1896,11 @@ const emptyCreateDialog = ref(false);
|
|||
<template #header>
|
||||
<DialogHeader
|
||||
:title="
|
||||
$t(`general.add`, {
|
||||
text: `${$t('customer.employer')} `,
|
||||
})
|
||||
customerFormState.dialogType === 'create'
|
||||
? $t(`general.add`, {
|
||||
text: `${$t('customer.employer')} `,
|
||||
})
|
||||
: `${$t('customer.employer')} `
|
||||
"
|
||||
>
|
||||
<template #title-after>
|
||||
|
|
@ -1840,8 +1923,11 @@ const emptyCreateDialog = ref(false);
|
|||
active
|
||||
hide-fade
|
||||
:fallback-cover="`/images/customer-${customerFormData.customerType}-banner-bg.jpg`"
|
||||
:img="customerFormState.customerImageUrl || null"
|
||||
:fallbackImg="`/images/customer-PERS-avartar-male.png`"
|
||||
:img="
|
||||
customerFormState.customerImageUrl ||
|
||||
`/images/customer-${customerFormData.customerType}-avartar-${customerFormData.customerType === 'PERS' ? customerFormData.customerBranch[0]?.gender : 'male'}.png`
|
||||
"
|
||||
:fallbackImg="`/images/customer-${customerFormData.customerType}-avartar-${customerFormData.customerType === 'PERS' ? customerFormData.customerBranch[0]?.gender : 'male'}.png`"
|
||||
:color="`hsla(var(--${customerFormData.customerType === 'PERS' ? 'teal-10-hsl' : 'violet-11-hsl'})/1)`"
|
||||
:bg-color="`hsla(var(--${customerFormData.customerType === 'PERS' ? 'teal-10-hsl' : 'violet-11-hsl'})/0.1)`"
|
||||
:icon="
|
||||
|
|
@ -1849,6 +1935,16 @@ const emptyCreateDialog = ref(false);
|
|||
? 'mdi-account-plus-outline'
|
||||
: 'mdi-office-building-outline'
|
||||
"
|
||||
:title="
|
||||
customerFormData.customerType === 'PERS'
|
||||
? `${customerFormData.customerBranch[0]?.firstName} ${customerFormData.customerBranch[0]?.lastName}`
|
||||
: customerFormData.customerBranch[0]?.registerName
|
||||
"
|
||||
:caption="
|
||||
customerFormData.customerType === 'PERS'
|
||||
? `${customerFormData.customerBranch[0]?.firstNameEN} ${customerFormData.customerBranch[0]?.lastNameEN}`
|
||||
: customerFormData.customerBranch[0]?.registerNameEN
|
||||
"
|
||||
@view="
|
||||
() => {
|
||||
customerFormState.imageDialog = true;
|
||||
|
|
@ -1908,6 +2004,7 @@ const emptyCreateDialog = ref(false);
|
|||
style="height: 100%; max-height: 100%; overflow-y: auto"
|
||||
>
|
||||
<EmployerFormBasicInfo
|
||||
v-if="customerFormData.customerBranch.length > 0"
|
||||
class="q-mb-xl"
|
||||
:readonly="
|
||||
(customerFormState.dialogType === 'edit' &&
|
||||
|
|
@ -1928,13 +2025,19 @@ const emptyCreateDialog = ref(false);
|
|||
"
|
||||
:customer-type="customerFormData.customerType"
|
||||
v-model:registered-branch-id="customerFormData.registeredBranchId"
|
||||
v-mode:customerName="customerFormData.customerName"
|
||||
v-mode:registerName="customerFormData.registerName"
|
||||
v-mode:citizenId="customerFormData.citizenId"
|
||||
v-mode:legalPersonNo="customerFormData.legalPersonNo"
|
||||
v-mode:businessType="customerFormData.businessType"
|
||||
v-mode:jobPosition="customerFormData.jobPosition"
|
||||
v-mode:telephoneNo="customerFormData.telephoneNo"
|
||||
v-model:customerName="customerNameInfo"
|
||||
v-model:registerName="
|
||||
customerFormData.customerBranch[0].registerName
|
||||
"
|
||||
v-model:citizenId="customerFormData.customerBranch[0].citizenId"
|
||||
v-model:legalPersonNo="
|
||||
customerFormData.customerBranch[0].legalPersonNo
|
||||
"
|
||||
v-model:businessType="
|
||||
customerFormData.customerBranch[0].businessType
|
||||
"
|
||||
v-model:jobPosition="customerFormData.customerBranch[0].jobPosition"
|
||||
v-model:telephoneNo="customerFormData.customerBranch[0].telephoneNo"
|
||||
v-model:branch-options="registerAbleBranchOption"
|
||||
/>
|
||||
<div class="row q-col-gutter-sm" id="form-branch-customer-branch">
|
||||
|
|
@ -1949,10 +2052,15 @@ const emptyCreateDialog = ref(false);
|
|||
/>
|
||||
<span>{{ $t('customer.form.group.branch') }}</span>
|
||||
<AddButton
|
||||
icon-only
|
||||
type="button"
|
||||
class="q-ml-sm"
|
||||
@click="customerFormStore.addCurrentCustomerBranch()"
|
||||
v-if="false"
|
||||
v-if="
|
||||
customerFormState.branchIndex === -1 &&
|
||||
!!customerFormState.editCustomerId &&
|
||||
customerFormState.dialogType !== 'create'
|
||||
"
|
||||
:disabled="!customerFormState.readonly"
|
||||
/>
|
||||
</div>
|
||||
|
|
@ -1986,10 +2094,6 @@ const emptyCreateDialog = ref(false);
|
|||
'legalPersonNo',
|
||||
'registerName',
|
||||
'registerNameEN',
|
||||
'registerDate',
|
||||
'authorizedCapital',
|
||||
'authorizedName',
|
||||
'authorizedNameEN',
|
||||
'customerName',
|
||||
];
|
||||
}
|
||||
|
|
@ -2014,16 +2118,23 @@ const emptyCreateDialog = ref(false);
|
|||
});
|
||||
}
|
||||
if (!customerFormData.customerBranch[idx].id) {
|
||||
await customerFormStore.submitFormCustomer(
|
||||
onCreateImageList,
|
||||
);
|
||||
customerFormState.readonly = true;
|
||||
notify('create', $t('general.success'));
|
||||
// await customerStore.createBranch({
|
||||
// ...customerFormData.customerBranch[idx],
|
||||
// customerId: customerFormState.editCustomerId,
|
||||
// id: undefined,
|
||||
// });
|
||||
let res;
|
||||
if (idx === 0) {
|
||||
res =
|
||||
await customerFormStore.submitFormCustomer(
|
||||
onCreateImageList,
|
||||
);
|
||||
} else {
|
||||
res = await customerStore.createBranch({
|
||||
...customerFormData.customerBranch[idx],
|
||||
customerId: customerFormState.editCustomerId,
|
||||
id: undefined,
|
||||
});
|
||||
}
|
||||
if (res) {
|
||||
customerFormState.readonly = true;
|
||||
notify('create', $t('general.success'));
|
||||
}
|
||||
} else {
|
||||
if (!customerFormState.editCustomerId) return;
|
||||
await customerStore.editBranchById(
|
||||
|
|
@ -2071,11 +2182,7 @@ const emptyCreateDialog = ref(false);
|
|||
"
|
||||
>
|
||||
<!-- v-if="!!customerFormState.editCustomerId" -->
|
||||
<!-- :action-disabled="
|
||||
!customerFormState.readonly ||
|
||||
(customerFormState.branchIndex !== -1 &&
|
||||
customerFormState.branchIndex !== idx)
|
||||
" -->
|
||||
|
||||
<EmployerFormBranch
|
||||
:index="idx"
|
||||
v-model:customer="customerFormData"
|
||||
|
|
@ -2084,10 +2191,19 @@ const emptyCreateDialog = ref(false);
|
|||
:customer-type="customerFormData.customerType"
|
||||
:customer-name="`${customerFormData.firstName} ${customerFormData.lastName}`"
|
||||
:readonly="customerFormState.branchIndex !== idx"
|
||||
:action-disabled="
|
||||
!customerFormState.readonly ||
|
||||
(customerFormState.branchIndex !== -1 &&
|
||||
customerFormState.branchIndex !== idx)
|
||||
"
|
||||
@edit="() => (customerFormState.branchIndex = idx)"
|
||||
@cancel="() => customerFormUndo(false)"
|
||||
@delete="
|
||||
async () => {
|
||||
if (idx === 0) {
|
||||
deleteCustomerById(customerFormState.editCustomerId);
|
||||
return;
|
||||
}
|
||||
if (!!customerFormData.customerBranch?.[idx].id) {
|
||||
const action = await deleteCustomerBranchById(
|
||||
customerFormData.customerBranch[idx].id || '',
|
||||
|
|
@ -2825,7 +2941,7 @@ const emptyCreateDialog = ref(false);
|
|||
}`"
|
||||
>
|
||||
<q-img
|
||||
:src="`/images/customer-${customerFormData.customerType}-avartar-${customerFormData.gender}.png`"
|
||||
:src="`/images/customer-${customerFormData.customerType}-avartar-${customerFormData.customerType === 'PERS' ? customerFormData.gender : 'male'}.png`"
|
||||
fit="contain"
|
||||
style="height: 100%"
|
||||
>
|
||||
|
|
@ -2943,16 +3059,19 @@ const emptyCreateDialog = ref(false);
|
|||
hide-action
|
||||
v-model:drawer-open="customerFormState.drawerModal"
|
||||
:title="
|
||||
$t(`form.title.${customerFormState.dialogType}`, {
|
||||
name: $t('customer.employer'),
|
||||
})
|
||||
customerFormData.customerType === 'CORP'
|
||||
? customerFormData.customerBranch[0]?.registerName
|
||||
: customerNameInfo
|
||||
"
|
||||
:badgeClass="
|
||||
customerFormData.gender === 'male'
|
||||
? 'app-bg-male text-white'
|
||||
: customerFormData.gender === 'female'
|
||||
? 'app-bg-female text-white'
|
||||
: ''
|
||||
:badgeLabel="
|
||||
customerFormData.customerType === 'CORP'
|
||||
? $t('customer.employerLegalEntity')
|
||||
: $t('customer.employerNaturalPerson')
|
||||
"
|
||||
:badgeStyle="
|
||||
customerFormData.customerType === 'CORP'
|
||||
? `color: var(--${$q.dark.isActive ? 'violet-10' : 'violet-11'}); background: hsl(var(--${$q.dark.isActive ? 'violet-10-hsl' : 'violet-11-hsl'})/0.15)`
|
||||
: `color: var(--${$q.dark.isActive ? 'teal-8' : 'teal-10'}); background: hsl(var(--${$q.dark.isActive ? 'teal-8-hsl' : 'teal-10-hsl'})/0.15)`
|
||||
"
|
||||
:close="
|
||||
() => {
|
||||
|
|
@ -2991,8 +3110,12 @@ const emptyCreateDialog = ref(false);
|
|||
<div class="column full-height">
|
||||
<div class="q-px-lg q-pt-lg surface-2">
|
||||
<ProfileBanner
|
||||
active
|
||||
:active="customerFormData.status !== 'INACTIVE'"
|
||||
hide-fade
|
||||
useToggle
|
||||
v-model:toggle-status="customerFormData.status"
|
||||
:menu="formMenuIcon"
|
||||
:toggleTitle="$t('status.title')"
|
||||
:fallback-cover="`/images/customer-${customerFormData.customerType}-banner-bg.jpg`"
|
||||
:img="
|
||||
`${baseUrl}/customer/${customerFormState.editCustomerId}/image/${customerFormData.selectedImage}`.concat(
|
||||
|
|
@ -3007,6 +3130,16 @@ const emptyCreateDialog = ref(false);
|
|||
? 'mdi-account-plus-outline'
|
||||
: 'mdi-office-building-outline'
|
||||
"
|
||||
:title="
|
||||
customerFormData.customerType === 'PERS'
|
||||
? `${customerFormData.customerBranch[0]?.firstName} ${customerFormData.customerBranch[0]?.lastName}`
|
||||
: customerFormData.customerBranch[0]?.registerName
|
||||
"
|
||||
:caption="
|
||||
customerFormData.customerType === 'PERS'
|
||||
? `${customerFormData.customerBranch[0]?.firstNameEN} ${customerFormData.customerBranch[0]?.lastNameEN}`
|
||||
: customerFormData.customerBranch[0]?.registerNameEN
|
||||
"
|
||||
@view="
|
||||
() => {
|
||||
customerFormState.imageDialog = true;
|
||||
|
|
@ -3016,6 +3149,12 @@ const emptyCreateDialog = ref(false);
|
|||
@edit="
|
||||
customerFormState.imageDialog = customerFormState.isImageEdit = true
|
||||
"
|
||||
@update:toggle-status="
|
||||
async (v) => {
|
||||
if (!customerFormState.editCustomerId) return;
|
||||
await triggerChangeStatus(customerFormState.editCustomerId, v);
|
||||
}
|
||||
"
|
||||
/>
|
||||
</div>
|
||||
|
||||
|
|
@ -3163,15 +3302,30 @@ const emptyCreateDialog = ref(false);
|
|||
if (!customerFormData.customerBranch) return;
|
||||
if (!customerFormState.editCustomerId) return;
|
||||
|
||||
if (customerFormData.customerType === 'PERS') {
|
||||
tabFieldRequired.main = [
|
||||
'citizenId',
|
||||
'namePrefix',
|
||||
'firstName',
|
||||
'firstNameEN',
|
||||
'lastName',
|
||||
'lastNameEN',
|
||||
'gender',
|
||||
'birthDate',
|
||||
];
|
||||
}
|
||||
if (customerFormData.customerType === 'CORP') {
|
||||
tabFieldRequired.main = [
|
||||
'legalPersonNo',
|
||||
'registerName',
|
||||
'registerNameEN',
|
||||
'registerDate',
|
||||
'authorizedCapital',
|
||||
'authorizedName',
|
||||
'authorizedNameEN',
|
||||
'customerName',
|
||||
];
|
||||
}
|
||||
if (customerFormData.customerType === 'PERS') {
|
||||
tabFieldRequired.main = ['citizenId'];
|
||||
}
|
||||
|
||||
let tapIsUndefined = validateTabField(
|
||||
customerFormData.customerBranch?.[idx],
|
||||
|
|
@ -3179,7 +3333,7 @@ const emptyCreateDialog = ref(false);
|
|||
);
|
||||
|
||||
if (tapIsUndefined.length > 0) {
|
||||
dialog({
|
||||
return dialog({
|
||||
color: 'warning',
|
||||
icon: 'mdi-alert',
|
||||
title: t('dialog.title.incompleteDataEntry'),
|
||||
|
|
@ -3192,52 +3346,51 @@ const emptyCreateDialog = ref(false);
|
|||
return;
|
||||
},
|
||||
});
|
||||
}
|
||||
if (!customerFormData.customerBranch[idx].id) {
|
||||
await customerStore.createBranch({
|
||||
...customerFormData.customerBranch[idx],
|
||||
customerId: customerFormState.editCustomerId,
|
||||
id: undefined,
|
||||
});
|
||||
} else {
|
||||
if (!customerFormData.customerBranch[idx].id) {
|
||||
await customerStore.createBranch({
|
||||
await customerStore.editBranchById(
|
||||
customerFormData.customerBranch[idx].id || '',
|
||||
{
|
||||
...customerFormData.customerBranch[idx],
|
||||
customerId: customerFormState.editCustomerId,
|
||||
id: undefined,
|
||||
});
|
||||
} else {
|
||||
await customerStore.editBranchById(
|
||||
customerFormData.customerBranch[idx].id || '',
|
||||
{
|
||||
...customerFormData.customerBranch[idx],
|
||||
id: undefined,
|
||||
},
|
||||
);
|
||||
}
|
||||
|
||||
customerFormData.customerBranch[idx].file?.forEach(
|
||||
async (v) => {
|
||||
if (!v.file) return;
|
||||
|
||||
const ext = v.file.name.split('.').at(-1);
|
||||
let filename = v.group + '-' + new Date().getTime();
|
||||
if (ext) filename += `.${ext}`;
|
||||
|
||||
const res = await customerStore.putAttachment({
|
||||
branchId:
|
||||
customerFormData.customerBranch?.[idx].id || '',
|
||||
file: v.file,
|
||||
filename,
|
||||
});
|
||||
|
||||
if (res) {
|
||||
await customerFormStore.assignFormData(
|
||||
customerFormState.editCustomerId,
|
||||
);
|
||||
}
|
||||
},
|
||||
);
|
||||
|
||||
await customerFormStore.assignFormData(
|
||||
customerFormState.editCustomerId,
|
||||
);
|
||||
|
||||
customerFormStore.resetForm();
|
||||
}
|
||||
|
||||
customerFormData.customerBranch[idx].file?.forEach(
|
||||
async (v) => {
|
||||
if (!v.file) return;
|
||||
|
||||
const ext = v.file.name.split('.').at(-1);
|
||||
let filename = v.group + '-' + new Date().getTime();
|
||||
if (ext) filename += `.${ext}`;
|
||||
|
||||
const res = await customerStore.putAttachment({
|
||||
branchId:
|
||||
customerFormData.customerBranch?.[idx].id || '',
|
||||
file: v.file,
|
||||
filename,
|
||||
});
|
||||
|
||||
if (res) {
|
||||
await customerFormStore.assignFormData(
|
||||
customerFormState.editCustomerId,
|
||||
);
|
||||
}
|
||||
},
|
||||
);
|
||||
|
||||
await customerFormStore.assignFormData(
|
||||
customerFormState.editCustomerId,
|
||||
);
|
||||
|
||||
customerFormStore.resetForm();
|
||||
}
|
||||
"
|
||||
>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue