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) {
|
||||
await customerFormStore.assignFormData(id);
|
||||
customerFormState.value.dialogType = 'edit';
|
||||
customerFormState.value.dialogModal = true;
|
||||
customerFormState.value.drawerModal = true;
|
||||
customerFormState.value.editCustomerId = id;
|
||||
}
|
||||
|
||||
|
|
@ -510,6 +510,8 @@ function customerConfirmUnsave(close = true) {
|
|||
action: () => {
|
||||
customerFormStore.resetForm();
|
||||
customerFormState.value.readonly = true;
|
||||
|
||||
customerFormState.value.drawerModal = !close;
|
||||
customerFormState.value.dialogModal = !close;
|
||||
},
|
||||
cancel: () => {},
|
||||
|
|
@ -2447,6 +2449,276 @@ const emptyCreateDialog = ref(false);
|
|||
</div>
|
||||
</template>
|
||||
</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 -->
|
||||
<DrawerInfo
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue