refactor: add drawer customer
This commit is contained in:
Net
parent
376c0b0553
commit
49986816d0
1 changed files with 273 additions and 1 deletions
|
|
@ -462,7 +462,7 @@ async function openHistory(id: string) {
|
||||||
async function editCustomerForm(id: string) {
|
async function editCustomerForm(id: string) {
|
||||||
await customerFormStore.assignFormData(id);
|
await customerFormStore.assignFormData(id);
|
||||||
customerFormState.value.dialogType = 'edit';
|
customerFormState.value.dialogType = 'edit';
|
||||||
customerFormState.value.dialogModal = true;
|
customerFormState.value.drawerModal = true;
|
||||||
customerFormState.value.editCustomerId = id;
|
customerFormState.value.editCustomerId = id;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -510,6 +510,8 @@ function customerConfirmUnsave(close = true) {
|
||||||
action: () => {
|
action: () => {
|
||||||
customerFormStore.resetForm();
|
customerFormStore.resetForm();
|
||||||
customerFormState.value.readonly = true;
|
customerFormState.value.readonly = true;
|
||||||
|
|
||||||
|
customerFormState.value.drawerModal = !close;
|
||||||
customerFormState.value.dialogModal = !close;
|
customerFormState.value.dialogModal = !close;
|
||||||
},
|
},
|
||||||
cancel: () => {},
|
cancel: () => {},
|
||||||
|
|
@ -2447,6 +2449,276 @@ const emptyCreateDialog = ref(false);
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
</ImageUploadDialog>
|
</ImageUploadDialog>
|
||||||
|
<!-- นายจ้าง -->
|
||||||
|
<DrawerInfo
|
||||||
|
hide-action
|
||||||
|
v-model:drawer-open="customerFormState.drawerModal"
|
||||||
|
:title="
|
||||||
|
$t(`form.title.${customerFormState.dialogType}`, {
|
||||||
|
name: $t('customer.employer'),
|
||||||
|
})
|
||||||
|
"
|
||||||
|
:badgeClass="
|
||||||
|
customerFormData.gender === 'male'
|
||||||
|
? 'app-bg-male text-white'
|
||||||
|
: customerFormData.gender === 'female'
|
||||||
|
? 'app-bg-female text-white'
|
||||||
|
: ''
|
||||||
|
"
|
||||||
|
:submit="
|
||||||
|
async () => {
|
||||||
|
await customerFormStore.submitFormCustomer();
|
||||||
|
customerFormState.readonly = true;
|
||||||
|
notify('create', $t('success'));
|
||||||
|
await fetchListCustomer();
|
||||||
|
}
|
||||||
|
"
|
||||||
|
:show="
|
||||||
|
async () => {
|
||||||
|
await fetchListOfOptionBranch();
|
||||||
|
customerFormStore.resetForm(customerFormState.dialogType === 'create');
|
||||||
|
}
|
||||||
|
"
|
||||||
|
:before-close="
|
||||||
|
() => {
|
||||||
|
if (customerFormStore.isFormDataDifferent()) {
|
||||||
|
customerConfirmUnsave();
|
||||||
|
return false;
|
||||||
|
} else {
|
||||||
|
fetchListCustomer();
|
||||||
|
customerFormState.branchIndex = -1;
|
||||||
|
}
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
"
|
||||||
|
>
|
||||||
|
<div class="column full-height">
|
||||||
|
<div class="q-px-lg q-pt-lg surface-2">
|
||||||
|
<ProfileBanner
|
||||||
|
active
|
||||||
|
hide-fade
|
||||||
|
:fallback-cover="`/images/customer-${customerFormData.customerType}-banner-bg.jpg`"
|
||||||
|
:img="
|
||||||
|
customerFormState.customerImageUrl ||
|
||||||
|
`/images/customer-${customerFormData.customerType}-avartar.png`
|
||||||
|
"
|
||||||
|
color="hsla(var(--pink-6-hsl)/1)"
|
||||||
|
bg-color="hsla(var(--pink-6-hsl)/0.15)"
|
||||||
|
@view="customerFormState.imageDialog = true"
|
||||||
|
@edit="dialogCustomerImageUpload?.browse()"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div
|
||||||
|
style="flex: 1; width: 100%; overflow-y: auto"
|
||||||
|
class="surface-2 q-pa-lg column"
|
||||||
|
id="customer-form"
|
||||||
|
>
|
||||||
|
<div class="col bg-red surface-1 rounded bordered row">
|
||||||
|
<div class="col full-height scroll" v-if="$q.screen.gt.sm">
|
||||||
|
<div class="q-py-md q-pl-md q-pr-sm">
|
||||||
|
<SideMenu
|
||||||
|
:menu="[
|
||||||
|
{
|
||||||
|
name: $t('customer.form.group.basicInfo'),
|
||||||
|
anchor: 'form-basic-info-customer',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: $t('customer.form.group.branch'),
|
||||||
|
anchor: 'form-branch-customer-branch',
|
||||||
|
},
|
||||||
|
...(customerFormData.customerBranch?.map((v, i) => ({
|
||||||
|
name:
|
||||||
|
i === 0
|
||||||
|
? $t('customer.form.headQuarters.title')
|
||||||
|
: $t('customer.form.branch.title', {
|
||||||
|
name: i,
|
||||||
|
}),
|
||||||
|
anchor: `form-branch-customer-no-${i}`,
|
||||||
|
sub: true,
|
||||||
|
})) || []),
|
||||||
|
]"
|
||||||
|
background="transparent"
|
||||||
|
:active="{
|
||||||
|
background: 'hsla(var(--blue-6-hsl) / .2)',
|
||||||
|
foreground: 'var(--blue-6)',
|
||||||
|
}"
|
||||||
|
scroll-element="#customer-form-content"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div
|
||||||
|
class="col-12 col-md-10 q-py-md q-pr-md q-pl-sm"
|
||||||
|
id="customer-form-content"
|
||||||
|
style="height: 100%; max-height: 100%; overflow-y: auto"
|
||||||
|
>
|
||||||
|
<EmployerFormBasicInfo
|
||||||
|
class="q-mb-xl"
|
||||||
|
:readonly="
|
||||||
|
(customerFormState.dialogType === 'edit' &&
|
||||||
|
customerFormState.readonly === true) ||
|
||||||
|
customerFormState.dialogType === 'info'
|
||||||
|
"
|
||||||
|
:action-disabled="customerFormState.branchIndex !== -1"
|
||||||
|
id="form-basic-info-customer"
|
||||||
|
:create="customerFormState.dialogType === 'create'"
|
||||||
|
@edit="
|
||||||
|
(customerFormState.dialogType = 'edit'),
|
||||||
|
(customerFormState.readonly = false)
|
||||||
|
"
|
||||||
|
@cancel="() => customerFormUndo(false)"
|
||||||
|
@delete="
|
||||||
|
customerFormState.editCustomerId &&
|
||||||
|
deleteCustomerById(customerFormState.editCustomerId)
|
||||||
|
"
|
||||||
|
:customer-type="customerFormData.customerType"
|
||||||
|
v-model:code="customerFormData.code"
|
||||||
|
v-model:registered-branch-id="customerFormData.registeredBranchId"
|
||||||
|
v-model:branch-options="registerAbleBranchOption"
|
||||||
|
v-model:first-name="customerFormData.firstName"
|
||||||
|
v-model:last-name="customerFormData.lastName"
|
||||||
|
v-model:first-name-en="customerFormData.firstNameEN"
|
||||||
|
v-model:last-name-en="customerFormData.lastNameEN"
|
||||||
|
v-model:name-prefix="customerFormData.namePrefix"
|
||||||
|
v-model:gender="customerFormData.gender"
|
||||||
|
v-model:birth-date="customerFormData.birthDate"
|
||||||
|
/>
|
||||||
|
|
||||||
|
<div class="row q-col-gutter-sm" id="form-branch-customer-branch">
|
||||||
|
<div
|
||||||
|
class="col-12 text-weight-bold text-body1 row items-center"
|
||||||
|
:style="{
|
||||||
|
opacity:
|
||||||
|
customerFormState.branchIndex !== -1 ? '0.5' : undefined,
|
||||||
|
}"
|
||||||
|
>
|
||||||
|
<q-icon
|
||||||
|
flat
|
||||||
|
size="xs"
|
||||||
|
class="q-pa-sm rounded q-mr-xs"
|
||||||
|
color="info"
|
||||||
|
name="mdi-briefcase-outline"
|
||||||
|
style="background-color: var(--surface-3)"
|
||||||
|
/>
|
||||||
|
<span>{{ $t('customer.form.group.branch') }}</span>
|
||||||
|
<AddButton
|
||||||
|
type="button"
|
||||||
|
class="q-ml-sm"
|
||||||
|
@click="customerFormStore.addCurrentCustomerBranch()"
|
||||||
|
v-if="
|
||||||
|
customerFormState.branchIndex === -1 &&
|
||||||
|
!!customerFormState.editCustomerId
|
||||||
|
"
|
||||||
|
:disabled="!customerFormState.readonly"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<template
|
||||||
|
v-for="(_, idx) in customerFormData.customerBranch"
|
||||||
|
:key="idx"
|
||||||
|
>
|
||||||
|
<q-form
|
||||||
|
class="full-width"
|
||||||
|
v-if="customerFormData.customerBranch"
|
||||||
|
greedy
|
||||||
|
@submit.prevent="
|
||||||
|
async () => {
|
||||||
|
if (!customerFormData.customerBranch) return;
|
||||||
|
if (!customerFormState.editCustomerId) return;
|
||||||
|
|
||||||
|
if (customerFormData.customerType === 'CORP') {
|
||||||
|
filtdRequire.main = ['legalPersonNo', 'registerName'];
|
||||||
|
}
|
||||||
|
if (customerFormData.customerType === 'PERS') {
|
||||||
|
filtdRequire.main = ['citizenId'];
|
||||||
|
}
|
||||||
|
|
||||||
|
let tapIsUndefined = validateFiltdRequire(
|
||||||
|
customerFormData.customerBranch?.[idx],
|
||||||
|
filtdRequire,
|
||||||
|
);
|
||||||
|
|
||||||
|
if (tapIsUndefined.length > 0) {
|
||||||
|
dialog({
|
||||||
|
color: 'warning',
|
||||||
|
icon: 'mdi-alert',
|
||||||
|
title: t('dialog.title.incompleteDataEntry'),
|
||||||
|
actionText: t('ok'),
|
||||||
|
persistent: true,
|
||||||
|
message: t('dialog.message.incompleteDataEntry', {
|
||||||
|
tap: `${tapIsUndefined.map((v: string) => t(`customerBranch.tab.${v}`)).join(', ')}`,
|
||||||
|
}),
|
||||||
|
action: async () => {
|
||||||
|
return;
|
||||||
|
},
|
||||||
|
});
|
||||||
|
} else {
|
||||||
|
if (!customerFormData.customerBranch[idx].id) {
|
||||||
|
await customerStore.createBranch({
|
||||||
|
...customerFormData.customerBranch[idx],
|
||||||
|
customerId: customerFormState.editCustomerId,
|
||||||
|
id: undefined,
|
||||||
|
});
|
||||||
|
} else {
|
||||||
|
await customerStore.editBranchById(
|
||||||
|
customerFormData.customerBranch[idx].id || '',
|
||||||
|
{
|
||||||
|
...customerFormData.customerBranch[idx],
|
||||||
|
id: undefined,
|
||||||
|
},
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
await customerFormStore.assignFormData(
|
||||||
|
customerFormState.editCustomerId,
|
||||||
|
);
|
||||||
|
customerFormStore.resetForm();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
"
|
||||||
|
>
|
||||||
|
<EmployerFormBranch
|
||||||
|
v-if="!!customerFormState.editCustomerId"
|
||||||
|
:index="idx"
|
||||||
|
v-model:customer-branch="
|
||||||
|
customerFormData.customerBranch[idx]
|
||||||
|
"
|
||||||
|
:customer-type="customerFormData.customerType"
|
||||||
|
:customer-name="`${customerFormData.firstName} ${customerFormData.lastName}`"
|
||||||
|
:action-disabled="
|
||||||
|
!customerFormState.readonly ||
|
||||||
|
(customerFormState.branchIndex !== -1 &&
|
||||||
|
customerFormState.branchIndex !== idx)
|
||||||
|
"
|
||||||
|
:readonly="customerFormState.branchIndex !== idx"
|
||||||
|
@edit="() => (customerFormState.branchIndex = idx)"
|
||||||
|
@cancel="() => customerFormUndo(false)"
|
||||||
|
@delete="
|
||||||
|
async () => {
|
||||||
|
if (!!customerFormData.customerBranch?.[idx].id) {
|
||||||
|
const action = await deleteCustomerBranchById(
|
||||||
|
customerFormData.customerBranch[idx].id || '',
|
||||||
|
);
|
||||||
|
if (action) {
|
||||||
|
await customerFormStore.assignFormData(
|
||||||
|
customerFormState.editCustomerId,
|
||||||
|
);
|
||||||
|
}
|
||||||
|
customerFormStore.resetForm();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
"
|
||||||
|
@save="() => {}"
|
||||||
|
/>
|
||||||
|
</q-form>
|
||||||
|
</template>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</DrawerInfo>
|
||||||
|
|
||||||
<!-- ลูกจ้าง edit employee -->
|
<!-- ลูกจ้าง edit employee -->
|
||||||
<DrawerInfo
|
<DrawerInfo
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue