feat: customer branch form
This commit is contained in:
Methapon2001
parent
779374b164
commit
09b4f2500a
6 changed files with 499 additions and 561 deletions
0
src/pages/03_customer-management/CustomerDialog.vue
Normal file
0
src/pages/03_customer-management/CustomerDialog.vue
Normal file
|
|
@ -9,7 +9,7 @@ import { calculateAge, dateFormat } from 'src/utils/datetime';
|
|||
import useCustomerStore from 'stores/customer';
|
||||
import useEmployeeStore from 'stores/employee';
|
||||
import useMyBranchStore from 'stores/my-branch';
|
||||
import useUtilsStore, { dialog } from 'stores/utils';
|
||||
import useUtilsStore, { dialog, notify } from 'stores/utils';
|
||||
import useFlowStore from 'stores/flow';
|
||||
import { Status } from 'stores/types';
|
||||
import { CustomerStats, Customer, CustomerBranch } from 'stores/customer/types';
|
||||
|
|
@ -20,7 +20,7 @@ import ButtonAddComponent from 'components/ButtonAddCompoent.vue';
|
|||
import PersonCard from 'components/home/PersonCard.vue';
|
||||
import StatCardComponent from 'components/StatCardComponent.vue';
|
||||
import TooltipComponent from 'components/TooltipComponent.vue';
|
||||
import AddButton from 'components/AddButton.vue';
|
||||
import EmptyAddButton from 'components/AddButton.vue';
|
||||
import NoData from 'components/NoData.vue';
|
||||
import PaginationComponent from 'components/PaginationComponent.vue';
|
||||
import DialogForm from 'components/DialogForm.vue';
|
||||
|
|
@ -33,6 +33,7 @@ import CustomerInfoComponent from './components/CustomerBranch.vue';
|
|||
import FormAddress from 'src/components/02_personnel-management/FormAddress.vue';
|
||||
import FormEmployeePassport from 'src/components/03_customer-management/FormEmployeePassport.vue';
|
||||
import FormEmployeeVisa from 'src/components/03_customer-management/FormEmployeeVisa.vue';
|
||||
import { AddButton } from 'src/components/button';
|
||||
|
||||
import {
|
||||
columnsCustomer,
|
||||
|
|
@ -47,6 +48,7 @@ import FormEmployeeHealthCheck from 'src/components/03_customer-management/FormE
|
|||
import FormEmployeeWorkHistory from 'src/components/03_customer-management/FormEmployeeWorkHistory.vue';
|
||||
import FormEmployeeOther from 'src/components/03_customer-management/FormEmployeeOther.vue';
|
||||
import useOptionStore from 'src/stores/options';
|
||||
import { DialogContainer, DialogHeader } from 'src/components/dialog';
|
||||
|
||||
const { t, locale } = useI18n();
|
||||
const $q = useQuasar();
|
||||
|
|
@ -449,7 +451,7 @@ function customerConfirmUnsave(close = true) {
|
|||
message: t('form.warning.unsave'),
|
||||
action: () => {
|
||||
customerFormStore.resetForm();
|
||||
customerFormState.value.editReadonly = true;
|
||||
customerFormState.value.readonly = true;
|
||||
customerFormState.value.dialogModal = !close;
|
||||
},
|
||||
cancel: () => {},
|
||||
|
|
@ -461,7 +463,7 @@ function customerFormUndo(close = true) {
|
|||
return customerConfirmUnsave(close);
|
||||
}
|
||||
customerFormStore.resetForm();
|
||||
customerFormState.value.editReadonly = true;
|
||||
customerFormState.value.readonly = true;
|
||||
}
|
||||
|
||||
function createCustomerForm(customerType: 'CORP' | 'PERS') {
|
||||
|
|
@ -1734,7 +1736,7 @@ watch(
|
|||
class="row items-center justify-center"
|
||||
style="flex-grow: 1"
|
||||
>
|
||||
<AddButton
|
||||
<EmptyAddButton
|
||||
:label="
|
||||
currentTab === 'employer'
|
||||
? 'customerEmployerAdd'
|
||||
|
|
@ -1770,49 +1772,25 @@ watch(
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<DialogForm
|
||||
v-model:modal="customerFormState.dialogModal"
|
||||
:title="
|
||||
$t(`form.title.${customerFormState.dialogType}`, {
|
||||
name: $t('customer.employer'),
|
||||
})
|
||||
"
|
||||
:edit="customerFormState.dialogType === 'edit'"
|
||||
:isEdit="customerFormState.editReadonly === false"
|
||||
:undo="() => customerFormUndo(false)"
|
||||
:delete-data="
|
||||
() =>
|
||||
customerFormState.editCustomerId &&
|
||||
deleteCustomerById(customerFormState.editCustomerId)
|
||||
"
|
||||
:editData="() => (customerFormState.editReadonly = false)"
|
||||
:show="
|
||||
() =>
|
||||
fetchListOfOptionBranch().then(() => {
|
||||
customerFormStore.resetForm(
|
||||
customerFormState.dialogType === 'create',
|
||||
);
|
||||
})
|
||||
"
|
||||
:submit="
|
||||
<DialogContainer
|
||||
:model-value="customerFormState.dialogModal"
|
||||
:onOpen="
|
||||
async () => {
|
||||
await customerFormStore.submitForm();
|
||||
await fetchListCustomer();
|
||||
await fetchListOfOptionBranch();
|
||||
customerFormStore.resetForm(customerFormState.dialogType === 'create');
|
||||
}
|
||||
"
|
||||
:close="() => (customerFormState.editReadonly = true)"
|
||||
:before-close="
|
||||
() => {
|
||||
if (customerFormStore.isFormDataDifferent()) {
|
||||
customerConfirmUnsave();
|
||||
return true;
|
||||
}
|
||||
return false; // close
|
||||
}
|
||||
"
|
||||
no-footer
|
||||
:onClose="() => (customerFormState.dialogModal = false)"
|
||||
>
|
||||
<div class="q-mx-lg q-mt-lg">
|
||||
<template #header>
|
||||
<DialogHeader
|
||||
:title="$t(`form.title.create`, { name: $t('customer.employer') })"
|
||||
>
|
||||
<!-- <template #title-after>{{ customerFormState.editCustomerId }}</template> -->
|
||||
</DialogHeader>
|
||||
</template>
|
||||
|
||||
<div class="q-px-lg q-pt-lg surface-2">
|
||||
<ProfileBanner
|
||||
active
|
||||
v-model:cover-url="customerFormState.customerImageUrl"
|
||||
|
|
@ -1832,93 +1810,136 @@ watch(
|
|||
/>
|
||||
</div>
|
||||
<div
|
||||
class="col surface-1 q-ma-lg rounded bordered scroll row relative-position"
|
||||
style="flex: 1; width: 100%; overflow-y: auto"
|
||||
class="surface-2 q-pa-lg"
|
||||
id="customer-form"
|
||||
>
|
||||
<div
|
||||
class="col"
|
||||
style="height: 100%; max-height: 100; overflow-y: auto"
|
||||
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) => ({
|
||||
name: $t('customer.form.branch.title', {
|
||||
name: v.branchNo || 0,
|
||||
}),
|
||||
anchor: `form-branch-customer-no-${v.branchNo}`,
|
||||
})) || []),
|
||||
]"
|
||||
background="transparent"
|
||||
:active="{
|
||||
background: 'hsla(var(--blue-6-hsl) / .2)',
|
||||
foreground: 'var(--blue-6)',
|
||||
<div class="col surface-1 full-height rounded bordered scroll row">
|
||||
<div
|
||||
class="col"
|
||||
style="height: 100%; max-height: 100; overflow-y: auto"
|
||||
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) => ({
|
||||
name: $t('customer.form.branch.title', {
|
||||
name: v.branchNo || 0,
|
||||
}),
|
||||
anchor: `form-branch-customer-no-${v.branchNo}`,
|
||||
})) || []),
|
||||
]"
|
||||
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"
|
||||
>
|
||||
<q-form
|
||||
@submit.prevent="
|
||||
async () => {
|
||||
await customerFormStore.submitFormCustomer();
|
||||
customerFormState.readonly = true;
|
||||
notify('create', $t('success'));
|
||||
}
|
||||
"
|
||||
:style="{
|
||||
opacity: customerFormState.branchIndex !== -1 ? '0.5' : undefined,
|
||||
}"
|
||||
scroll-element="#customer-form-content"
|
||||
/>
|
||||
>
|
||||
<FormBasicInfo
|
||||
class="q-mb-xl"
|
||||
:readonly="
|
||||
customerFormState.dialogType === 'edit' &&
|
||||
customerFormState.readonly === true
|
||||
"
|
||||
:action-disabled="customerFormState.branchIndex !== -1"
|
||||
id="form-basic-info-customer"
|
||||
:create="customerFormState.dialogType === 'create'"
|
||||
@edit="customerFormState.readonly = false"
|
||||
@cancel="() => customerFormUndo(false)"
|
||||
@delete="
|
||||
customerFormState.editCustomerId &&
|
||||
deleteCustomerById(customerFormState.editCustomerId)
|
||||
"
|
||||
:customer-type="customerFormData.customerType"
|
||||
v-model:tax-no="customerFormData.taxNo"
|
||||
v-model:customer-name="customerFormData.customerName"
|
||||
v-model:customer-name-en="customerFormData.customerNameEN"
|
||||
v-model:person-name="customerFormData.personName"
|
||||
v-model:registered-branch-id="customerFormData.registeredBranchId"
|
||||
v-model:branch-options="registerAbleBranchOption"
|
||||
/>
|
||||
</q-form>
|
||||
<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"
|
||||
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"
|
||||
:disabled="!customerFormState.readonly"
|
||||
/>
|
||||
</div>
|
||||
<q-form
|
||||
@submit.prevent
|
||||
class="full-width"
|
||||
v-if="customerFormData.customerBranch"
|
||||
v-for="(_, idx) in customerFormData.customerBranch"
|
||||
>
|
||||
<FormBranch
|
||||
v-if="!!customerFormState.editCustomerId"
|
||||
v-model:customer-branch="customerFormData.customerBranch[idx]"
|
||||
:customer-type="customerFormData.customerType"
|
||||
:action-disabled="
|
||||
!customerFormState.readonly ||
|
||||
(customerFormState.branchIndex !== -1 &&
|
||||
customerFormState.branchIndex !== idx)
|
||||
"
|
||||
:readonly="customerFormState.branchIndex !== idx"
|
||||
@edit="() => (customerFormState.branchIndex = idx)"
|
||||
@cancel="() => customerFormUndo(false)"
|
||||
@delete="() => {}"
|
||||
@save="() => {}"
|
||||
/>
|
||||
</q-form>
|
||||
</div>
|
||||
</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"
|
||||
>
|
||||
<FormBasicInfo
|
||||
class="q-mb-xl"
|
||||
:readonly="
|
||||
customerFormState.dialogType === 'edit' &&
|
||||
customerFormState.editReadonly === true
|
||||
"
|
||||
id="form-basic-info-customer"
|
||||
@save="customerFormState.saveMode = 'customer'"
|
||||
:customer-type="customerFormData.customerType"
|
||||
v-model:tax-no="customerFormData.taxNo"
|
||||
v-model:customer-name="customerFormData.customerName"
|
||||
v-model:customer-name-en="customerFormData.customerNameEN"
|
||||
v-model:person-name="customerFormData.personName"
|
||||
v-model:registered-branch-id="customerFormData.registeredBranchId"
|
||||
v-model:branch-options="registerAbleBranchOption"
|
||||
/>
|
||||
<FormBranch
|
||||
v-if="!!customerFormState.editCustomerId"
|
||||
id="form-branch-customer-branch"
|
||||
:customer-type="customerFormData.customerType"
|
||||
:editable="
|
||||
customerFormState.dialogType === 'create' ||
|
||||
customerFormState.editReadonly === false
|
||||
"
|
||||
@add-branch="customerFormStore.addCurrentCustomerBranch()"
|
||||
@save-branch="
|
||||
(idx) => {
|
||||
customerFormState.saveMode = 'branch';
|
||||
customerFormState.branchIndex = idx;
|
||||
}
|
||||
"
|
||||
v-model:customer-branch="customerFormData.customerBranch"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- <q-btn -->
|
||||
<!-- @click="customerFormState.saveMode = 'customer'" -->
|
||||
<!-- type="submit" -->
|
||||
<!-- label="Save" -->
|
||||
<!-- /> -->
|
||||
<!-- <q-btn -->
|
||||
<!-- @click="customerFormState.saveMode = 'branch'" -->
|
||||
<!-- type="submit" -->
|
||||
<!-- label="Save" -->
|
||||
<!-- /> -->
|
||||
</DialogForm>
|
||||
</DialogContainer>
|
||||
|
||||
<DialogForm
|
||||
:title="$t('form.title.create', { name: 'Employee' })"
|
||||
|
|
|
|||
|
|
@ -4,13 +4,27 @@ import { QSelect } from 'quasar';
|
|||
import { selectFilterOptionRefMod } from 'stores/utils';
|
||||
import { getRole } from 'src/services/keycloak';
|
||||
import { onMounted } from 'vue';
|
||||
import {
|
||||
SaveButton,
|
||||
EditButton,
|
||||
CancelButton,
|
||||
DeleteButton,
|
||||
} from 'src/components/button';
|
||||
|
||||
defineProps<{
|
||||
prefixId?: string;
|
||||
outlined?: boolean;
|
||||
readonly?: boolean;
|
||||
create?: boolean;
|
||||
actionDisabled?: boolean;
|
||||
customerType?: 'CORP' | 'PERS';
|
||||
}>();
|
||||
defineEmits<{
|
||||
(e: 'save'): void;
|
||||
(e: 'edit'): void;
|
||||
(e: 'delete'): void;
|
||||
(e: 'cancel'): void;
|
||||
}>();
|
||||
|
||||
const personName = defineModel<string>('personName', { required: true });
|
||||
const customerName = defineModel<string>('customerName', { required: true });
|
||||
|
|
@ -65,15 +79,32 @@ watch(
|
|||
style="background-color: var(--surface-3)"
|
||||
/>
|
||||
<span>{{ $t('customer.form.group.basicInfo') }}</span>
|
||||
<q-btn
|
||||
<EditButton
|
||||
v-if="readonly && !create"
|
||||
type="button"
|
||||
@click="$emit('edit')"
|
||||
class="q-ml-auto"
|
||||
:disabled="actionDisabled"
|
||||
/>
|
||||
<DeleteButton
|
||||
v-if="readonly && !create"
|
||||
@click="$emit('delete')"
|
||||
type="button"
|
||||
class="q-ml-sm"
|
||||
:disabled="actionDisabled"
|
||||
/>
|
||||
<SaveButton
|
||||
v-if="!readonly"
|
||||
type="submit"
|
||||
dense
|
||||
unelevated
|
||||
color="primary"
|
||||
:label="$t('save')"
|
||||
@click="$emit('save')"
|
||||
class="q-px-md q-ml-auto rounded"
|
||||
class="q-ml-auto"
|
||||
:disabled="actionDisabled"
|
||||
/>
|
||||
<CancelButton
|
||||
v-if="!readonly && !create"
|
||||
type="button"
|
||||
class="q-ml-sm"
|
||||
:disabled="actionDisabled"
|
||||
@click="$emit('cancel')"
|
||||
/>
|
||||
</div>
|
||||
<q-select
|
||||
|
|
|
|||
|
|
@ -1,314 +1,291 @@
|
|||
<script setup lang="ts">
|
||||
import { ref } from 'vue';
|
||||
import FormAddress from 'src/components/02_personnel-management/FormAddress.vue';
|
||||
import FormBusiness from './FormBusiness.vue';
|
||||
import { CustomerCreate } from 'src/stores/customer/types';
|
||||
import { dateFormat, parseAndFormatDate } from 'src/utils/datetime';
|
||||
import { ref, watch } from 'vue';
|
||||
import FormContact from './FormContact.vue';
|
||||
import { EditButton } from 'src/components/button';
|
||||
import DeleteButton from 'src/components/button/DeleteButton.vue';
|
||||
import SaveButton from 'src/components/button/SaveButton.vue';
|
||||
import CancelButton from 'src/components/button/CancelButton.vue';
|
||||
|
||||
const branch = defineModel<CustomerCreate['customerBranch']>('customerBranch', {
|
||||
default: [],
|
||||
});
|
||||
|
||||
const tab = ref<
|
||||
const item = defineModel<NonNullable<CustomerCreate['customerBranch']>[number]>(
|
||||
'customerBranch',
|
||||
{
|
||||
branch: NonNullable<CustomerCreate['customerBranch']>[number];
|
||||
tab: string;
|
||||
}[]
|
||||
>([]);
|
||||
|
||||
watch(
|
||||
branch,
|
||||
() => {
|
||||
tab.value =
|
||||
branch.value?.map((a) => ({
|
||||
branch: a,
|
||||
tab:
|
||||
tab.value.find((b) => (b.branch === a ? true : b.branch.id === a.id))
|
||||
?.tab || 'main',
|
||||
})) || [];
|
||||
required: true,
|
||||
default: [],
|
||||
},
|
||||
{ deep: true },
|
||||
);
|
||||
const tab = ref('main');
|
||||
|
||||
defineEmits<{
|
||||
(e: 'addBranch'): void;
|
||||
(e: 'saveBranch', i: number, v: (typeof tab.value)[number]['branch']): void;
|
||||
(e: 'deleteBranch', i: number, v: (typeof tab.value)[number]['branch']): void;
|
||||
(e: 'edit'): void;
|
||||
(e: 'save'): void;
|
||||
(e: 'cancel'): void;
|
||||
(e: 'delete'): void;
|
||||
}>();
|
||||
|
||||
defineProps<{
|
||||
editable?: boolean;
|
||||
readonly?: boolean;
|
||||
prefixId?: string;
|
||||
actionDisabled?: boolean;
|
||||
customerType?: 'CORP' | 'PERS';
|
||||
}>();
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="row q-col-gutter-md">
|
||||
<div class="col-12 text-weight-bold text-body1 row items-center">
|
||||
<q-icon
|
||||
flat
|
||||
size="xs"
|
||||
class="q-pa-sm rounded q-mr-xs"
|
||||
color="info"
|
||||
name="mdi-briefcase"
|
||||
style="background-color: var(--surface-3)"
|
||||
/>
|
||||
<span>{{ $t('customer.form.group.branch') }}</span>
|
||||
<q-btn
|
||||
type="button"
|
||||
rounded
|
||||
flat
|
||||
<span
|
||||
class="col-12 text-weight-bold row items-center q-mb-sm"
|
||||
:style="{ opacity: actionDisabled ? '.5' : undefined }"
|
||||
:id="`form-branch-customer-no-${item.branchNo}`"
|
||||
>
|
||||
{{ $t('customer.form.branch.title', { name: item.branchNo || 0 }) }}
|
||||
<EditButton
|
||||
v-if="readonly"
|
||||
@click="$emit('edit')"
|
||||
class="q-ml-auto"
|
||||
type="button"
|
||||
:disabled="actionDisabled"
|
||||
/>
|
||||
<DeleteButton
|
||||
v-if="readonly"
|
||||
@click="$emit('delete')"
|
||||
class="q-ml-sm"
|
||||
type="button"
|
||||
:disabled="actionDisabled"
|
||||
/>
|
||||
<SaveButton
|
||||
v-if="!readonly"
|
||||
@click="$emit('save')"
|
||||
class="q-ml-auto"
|
||||
type="submit"
|
||||
:disabled="actionDisabled"
|
||||
/>
|
||||
<CancelButton
|
||||
v-if="!readonly"
|
||||
@click="$emit('cancel')"
|
||||
class="q-ml-sm"
|
||||
type="button"
|
||||
:disabled="actionDisabled"
|
||||
/>
|
||||
</span>
|
||||
|
||||
<div class="col-12" :style="{ opacity: actionDisabled ? '.5' : undefined }">
|
||||
<div class="rounded bordered">
|
||||
<q-tabs
|
||||
v-model="tab"
|
||||
dense
|
||||
unelevated
|
||||
color="primary"
|
||||
@click="$emit('addBranch')"
|
||||
v-if="editable"
|
||||
icon="mdi-plus"
|
||||
class="q-ml-md"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<template v-for="(item, idx) in branch">
|
||||
<span
|
||||
class="col-12 text-weight-bold row items-center"
|
||||
:id="`form-branch-customer-no-${item.branchNo}`"
|
||||
align="left"
|
||||
class="bordered-b"
|
||||
active-color="primary"
|
||||
no-caps
|
||||
>
|
||||
{{ $t('customer.form.branch.title', { name: item.branchNo || 0 }) }}
|
||||
<q-btn
|
||||
v-if="editable"
|
||||
type="button"
|
||||
dense
|
||||
unelevated
|
||||
text-color="red-9"
|
||||
color="red-2"
|
||||
:label="$t('delete')"
|
||||
@click="$emit('deleteBranch', idx, item)"
|
||||
class="q-px-md q-ml-auto rounded"
|
||||
/>
|
||||
<q-btn
|
||||
v-if="editable"
|
||||
type="submit"
|
||||
dense
|
||||
unelevated
|
||||
color="primary"
|
||||
:label="$t('save')"
|
||||
@click="$emit('saveBranch', idx, item)"
|
||||
class="q-px-md q-ml-sm rounded"
|
||||
/>
|
||||
</span>
|
||||
|
||||
<div class="col-12" v-if="tab[idx]">
|
||||
<div class="rounded bordered">
|
||||
<q-tabs
|
||||
v-model="tab[idx].tab"
|
||||
dense
|
||||
align="left"
|
||||
class="bordered-b"
|
||||
active-color="primary"
|
||||
no-caps
|
||||
>
|
||||
<q-tab name="main" label="Main"></q-tab>
|
||||
<q-tab name="address" label="Address"></q-tab>
|
||||
<q-tab name="business" label="Business"></q-tab>
|
||||
</q-tabs>
|
||||
<q-tab-panels v-model="tab[idx].tab">
|
||||
<q-tab-panel name="main">
|
||||
<div class="row q-col-gutter-md">
|
||||
<q-tab name="main" label="Main"></q-tab>
|
||||
<q-tab name="address" label="Address"></q-tab>
|
||||
<q-tab name="business" label="Business"></q-tab>
|
||||
<q-tab name="contact" label="Contact"></q-tab>
|
||||
</q-tabs>
|
||||
<q-tab-panels v-model="tab">
|
||||
<q-tab-panel name="main">
|
||||
<div class="row q-col-gutter-md">
|
||||
<q-input
|
||||
lazy-rules="ondemand"
|
||||
dense
|
||||
outlined
|
||||
:readonly="readonly"
|
||||
hide-bottom-space
|
||||
:label="$t('customerBranch.form.no')"
|
||||
v-model="item.branchNo"
|
||||
:for="`${prefixId}-input-branch-branch-no`"
|
||||
type="number"
|
||||
class="col-12 col-md-2"
|
||||
/>
|
||||
<q-input
|
||||
lazy-rules="ondemand"
|
||||
dense
|
||||
outlined
|
||||
readonly
|
||||
hide-bottom-space
|
||||
:label="$t('customerBranch.form.code')"
|
||||
:model-value="item.code || '-'"
|
||||
:for="`${prefixId}-input-branch-branch-code`"
|
||||
class="col-12 col-md-4"
|
||||
/>
|
||||
<q-input
|
||||
lazy-rules="ondemand"
|
||||
dense
|
||||
outlined
|
||||
:readonly="readonly"
|
||||
hide-bottom-space
|
||||
:label="$t('customerBranch.form.taxNo')"
|
||||
v-model="item.taxNo"
|
||||
:for="`${prefixId}-input-branch-tax-no`"
|
||||
type="number"
|
||||
class="col-12 col-md-4"
|
||||
/>
|
||||
<q-input
|
||||
lazy-rules="ondemand"
|
||||
dense
|
||||
outlined
|
||||
:readonly="readonly"
|
||||
hide-bottom-space
|
||||
:label="$t('customerBranch.form.name')"
|
||||
v-model="item.name"
|
||||
:for="`${prefixId}-input-branch-tax-no`"
|
||||
class="col-12 col-md-6"
|
||||
/>
|
||||
<q-input
|
||||
lazy-rules="ondemand"
|
||||
dense
|
||||
outlined
|
||||
:readonly="readonly"
|
||||
hide-bottom-space
|
||||
:label="$t('customerBranch.form.nameEN')"
|
||||
v-model="item.nameEN"
|
||||
:for="`${prefixId}-input-branch-tax-no`"
|
||||
class="col-12 col-md-6"
|
||||
/>
|
||||
<q-input
|
||||
lazy-rules="ondemand"
|
||||
dense
|
||||
outlined
|
||||
v-if="customerType === 'CORP'"
|
||||
:readonly="readonly"
|
||||
hide-bottom-space
|
||||
:label="$t('customerBranch.form.registerName')"
|
||||
v-model="item.registerName"
|
||||
:for="`${prefixId}-input-branch-register-name`"
|
||||
class="col-12 col-md-4"
|
||||
/>
|
||||
<q-input
|
||||
lazy-rules="ondemand"
|
||||
dense
|
||||
outlined
|
||||
:readonly="readonly"
|
||||
hide-bottom-space
|
||||
v-if="customerType === 'CORP'"
|
||||
:label="$t('customerBranch.form.authorizedCapital')"
|
||||
v-model="item.authorizedCapital"
|
||||
:for="`${prefixId}-input-branch-authorized-capital`"
|
||||
class="col-12 col-md-4"
|
||||
/>
|
||||
<VueDatePicker
|
||||
:id="`${prefixId}-picker-date-register-date`"
|
||||
:teleport="true"
|
||||
utc
|
||||
v-if="customerType === 'CORP'"
|
||||
auto-apply
|
||||
v-model="item.registerDate"
|
||||
:dark="$q.dark.isActive"
|
||||
:locale="$i18n.locale === 'th-th' ? 'th' : 'en'"
|
||||
:enableTimePicker="false"
|
||||
:disabled="readonly"
|
||||
class="col-md-4 col-12"
|
||||
>
|
||||
<template #year="{ value }">
|
||||
{{ $i18n.locale === 'th-th' ? value + 543 : value }}
|
||||
</template>
|
||||
<template #year-overlay-value="{ value }">
|
||||
{{ $i18n.locale === 'th-th' ? value + 543 : value }}
|
||||
</template>
|
||||
<template #trigger>
|
||||
<q-input
|
||||
lazy-rules="ondemand"
|
||||
:for="`${prefixId}-input-start-date`"
|
||||
:id="`${prefixId}-input-start-date`"
|
||||
:label="$t('customerBranch.form.registerDate')"
|
||||
dense
|
||||
outlined
|
||||
:readonly="!editable"
|
||||
hide-bottom-space
|
||||
:label="$t('customerBranch.form.no')"
|
||||
v-model="item.branchNo"
|
||||
:for="`${prefixId}-input-branch-${idx}-branch-no`"
|
||||
type="number"
|
||||
class="col-12 col-md-2"
|
||||
/>
|
||||
<q-input
|
||||
lazy-rules="ondemand"
|
||||
dense
|
||||
outlined
|
||||
readonly
|
||||
:disable="editable"
|
||||
hide-bottom-space
|
||||
:label="$t('customerBranch.form.code')"
|
||||
:model-value="item.code || '-'"
|
||||
:for="`${prefixId}-input-branch-${idx}-branch-code`"
|
||||
class="col-12 col-md-4"
|
||||
/>
|
||||
<q-input
|
||||
lazy-rules="ondemand"
|
||||
dense
|
||||
outlined
|
||||
:readonly="!editable"
|
||||
hide-bottom-space
|
||||
:label="$t('customerBranch.form.taxNo')"
|
||||
v-model="item.taxNo"
|
||||
:for="`${prefixId}-input-branch-${idx}-tax-no`"
|
||||
type="number"
|
||||
class="col-12 col-md-4"
|
||||
/>
|
||||
<q-input
|
||||
lazy-rules="ondemand"
|
||||
dense
|
||||
outlined
|
||||
:readonly="!editable"
|
||||
hide-bottom-space
|
||||
:label="$t('customerBranch.form.name')"
|
||||
v-model="item.name"
|
||||
:for="`${prefixId}-input-branch-${idx}-tax-no`"
|
||||
class="col-12 col-md-6"
|
||||
/>
|
||||
<q-input
|
||||
lazy-rules="ondemand"
|
||||
dense
|
||||
outlined
|
||||
:readonly="!editable"
|
||||
hide-bottom-space
|
||||
:label="$t('customerBranch.form.nameEN')"
|
||||
v-model="item.nameEN"
|
||||
:for="`${prefixId}-input-branch-${idx}-tax-no`"
|
||||
class="col-12 col-md-6"
|
||||
/>
|
||||
<q-input
|
||||
lazy-rules="ondemand"
|
||||
dense
|
||||
outlined
|
||||
v-if="customerType === 'CORP'"
|
||||
:readonly="!editable"
|
||||
hide-bottom-space
|
||||
:label="$t('customerBranch.form.registerName')"
|
||||
v-model="item.registerName"
|
||||
:for="`${prefixId}-input-branch-${idx}-register-name`"
|
||||
class="col-12 col-md-4"
|
||||
/>
|
||||
<q-input
|
||||
lazy-rules="ondemand"
|
||||
dense
|
||||
outlined
|
||||
:readonly="!editable"
|
||||
hide-bottom-space
|
||||
v-if="customerType === 'CORP'"
|
||||
:label="$t('customerBranch.form.authorizedCapital')"
|
||||
v-model="item.authorizedCapital"
|
||||
:for="`${prefixId}-input-branch-${idx}-authorized-capital`"
|
||||
class="col-12 col-md-4"
|
||||
/>
|
||||
<VueDatePicker
|
||||
:id="`${prefixId}-picker-date-register-date`"
|
||||
:teleport="true"
|
||||
utc
|
||||
v-if="customerType === 'CORP'"
|
||||
auto-apply
|
||||
v-model="item.registerDate"
|
||||
:dark="$q.dark.isActive"
|
||||
:locale="$i18n.locale === 'th-th' ? 'th' : 'en'"
|
||||
:enableTimePicker="false"
|
||||
:disabled="!editable"
|
||||
class="col-md-4 col-12"
|
||||
>
|
||||
<template #year="{ value }">
|
||||
{{ $i18n.locale === 'th-th' ? value + 543 : value }}
|
||||
</template>
|
||||
<template #year-overlay-value="{ value }">
|
||||
{{ $i18n.locale === 'th-th' ? value + 543 : value }}
|
||||
</template>
|
||||
<template #trigger>
|
||||
<q-input
|
||||
lazy-rules="ondemand"
|
||||
:for="`${prefixId}-input-start-date`"
|
||||
:id="`${prefixId}-input-start-date`"
|
||||
:label="$t('customerBranch.form.registerDate')"
|
||||
dense
|
||||
outlined
|
||||
:readonly="!editable"
|
||||
placeholder="DD/MM/YYYY"
|
||||
:mask="!editable ? '' : '##/##/####'"
|
||||
:model-value="
|
||||
item.registerDate
|
||||
? !editable
|
||||
? dateFormat(item.registerDate)
|
||||
: dateFormat(item.registerDate, false, false, true)
|
||||
: undefined
|
||||
"
|
||||
@update:model-value="
|
||||
(v) => {
|
||||
if (editable && v && v.toString().length === 10) {
|
||||
const _date = parseAndFormatDate(v, $i18n.locale);
|
||||
if (_date) {
|
||||
item.registerDate?.setDate(_date.getDate());
|
||||
item.registerDate?.setMonth(_date.getMonth());
|
||||
item.registerDate?.setFullYear(
|
||||
_date.getFullYear(),
|
||||
);
|
||||
} else {
|
||||
item.registerDate = null;
|
||||
}
|
||||
}
|
||||
:readonly="readonly"
|
||||
placeholder="DD/MM/YYYY"
|
||||
:mask="readonly ? '' : '##/##/####'"
|
||||
:model-value="
|
||||
item.registerDate
|
||||
? readonly
|
||||
? dateFormat(item.registerDate)
|
||||
: dateFormat(item.registerDate, false, false, true)
|
||||
: undefined
|
||||
"
|
||||
@update:model-value="
|
||||
(v) => {
|
||||
if (readonly && v && v.toString().length === 10) {
|
||||
const _date = parseAndFormatDate(v, $i18n.locale);
|
||||
if (_date) {
|
||||
item.registerDate?.setDate(_date.getDate());
|
||||
item.registerDate?.setMonth(_date.getMonth());
|
||||
item.registerDate?.setFullYear(_date.getFullYear());
|
||||
} else {
|
||||
item.registerDate = null;
|
||||
}
|
||||
"
|
||||
>
|
||||
<template v-slot:prepend>
|
||||
<q-icon
|
||||
size="xs"
|
||||
name="mdi-calendar-blank-outline"
|
||||
class="cursor-pointer"
|
||||
color="primary"
|
||||
/>
|
||||
</template>
|
||||
<template v-slot:append>
|
||||
<q-icon
|
||||
v-if="!item.registerDate && editable"
|
||||
name="mdi-close-circle"
|
||||
class="cursor-pointer app-text-muted"
|
||||
size="sm"
|
||||
@click="item.registerDate = null"
|
||||
/>
|
||||
</template>
|
||||
</q-input>
|
||||
}
|
||||
}
|
||||
"
|
||||
>
|
||||
<template v-slot:prepend>
|
||||
<q-icon
|
||||
size="xs"
|
||||
name="mdi-calendar-blank-outline"
|
||||
class="cursor-pointer"
|
||||
color="primary"
|
||||
/>
|
||||
</template>
|
||||
</VueDatePicker>
|
||||
</div>
|
||||
</q-tab-panel>
|
||||
<q-tab-panel name="address">
|
||||
<FormAddress
|
||||
:prefix-id="prefixId || 'employer'"
|
||||
hide-title
|
||||
dense
|
||||
:readonly="!editable"
|
||||
outlined
|
||||
:title="$t('form.address')"
|
||||
v-model:address="item.address"
|
||||
v-model:addressEN="item.addressEN"
|
||||
v-model:province-id="item.provinceId"
|
||||
v-model:district-id="item.districtId"
|
||||
v-model:sub-district-id="item.subDistrictId"
|
||||
:addressTitle="$t('form.address')"
|
||||
:addressTitleEN="$t('form.address', { suffix: '(EN)' })"
|
||||
/>
|
||||
</q-tab-panel>
|
||||
<q-tab-panel name="business">
|
||||
<FormBusiness
|
||||
dense
|
||||
outlined
|
||||
:prefix-id="prefixId || 'employer'"
|
||||
:readonly="!editable"
|
||||
v-model:employment-office="item.employmentOffice"
|
||||
v-model:bussiness-type="item.bussinessType"
|
||||
v-model:bussiness-type-en="item.bussinessTypeEN"
|
||||
v-model:job-position="item.jobPosition"
|
||||
v-model:job-position-en="item.jobPositionEN"
|
||||
v-model:job-description="item.jobDescription"
|
||||
v-model:sale-employee="item.saleEmployee"
|
||||
v-model:pay-date="item.payDate"
|
||||
v-model:wage-rate="item.wageRate"
|
||||
/>
|
||||
</q-tab-panel>
|
||||
</q-tab-panels>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<template v-slot:append>
|
||||
<q-icon
|
||||
v-if="!item.registerDate && readonly"
|
||||
name="mdi-close-circle"
|
||||
class="cursor-pointer app-text-muted"
|
||||
size="sm"
|
||||
@click="item.registerDate = null"
|
||||
/>
|
||||
</template>
|
||||
</q-input>
|
||||
</template>
|
||||
</VueDatePicker>
|
||||
</div>
|
||||
</q-tab-panel>
|
||||
<q-tab-panel name="address">
|
||||
<FormAddress
|
||||
:prefix-id="prefixId || 'employer'"
|
||||
hide-title
|
||||
dense
|
||||
:readonly="readonly"
|
||||
outlined
|
||||
:title="$t('form.address')"
|
||||
v-model:address="item.address"
|
||||
v-model:addressEN="item.addressEN"
|
||||
v-model:province-id="item.provinceId"
|
||||
v-model:district-id="item.districtId"
|
||||
v-model:sub-district-id="item.subDistrictId"
|
||||
:addressTitle="$t('form.address')"
|
||||
:addressTitleEN="$t('form.address', { suffix: '(EN)' })"
|
||||
/>
|
||||
</q-tab-panel>
|
||||
<q-tab-panel name="business">
|
||||
<FormBusiness
|
||||
dense
|
||||
outlined
|
||||
:prefix-id="prefixId || 'employer'"
|
||||
:readonly="readonly"
|
||||
v-model:employment-office="item.employmentOffice"
|
||||
v-model:bussiness-type="item.bussinessType"
|
||||
v-model:bussiness-type-en="item.bussinessTypeEN"
|
||||
v-model:job-position="item.jobPosition"
|
||||
v-model:job-position-en="item.jobPositionEN"
|
||||
v-model:job-description="item.jobDescription"
|
||||
v-model:sale-employee="item.saleEmployee"
|
||||
v-model:pay-date="item.payDate"
|
||||
v-model:wage-rate="item.wageRate"
|
||||
/>
|
||||
</q-tab-panel>
|
||||
<q-tab-panel name="contact">
|
||||
<FormContact
|
||||
:readonly="readonly"
|
||||
v-model:email="item.email"
|
||||
v-model:telephone="item.telephoneNo"
|
||||
/>
|
||||
</q-tab-panel>
|
||||
</q-tab-panels>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
|
|
|||
37
src/pages/03_customer-management/components/FormContact.vue
Normal file
37
src/pages/03_customer-management/components/FormContact.vue
Normal file
|
|
@ -0,0 +1,37 @@
|
|||
<script lang="ts" setup>
|
||||
defineProps<{
|
||||
readonly?: boolean;
|
||||
prefixId?: string;
|
||||
}>();
|
||||
const mail = defineModel<string>('mail');
|
||||
const telephone = defineModel<string>('telephone');
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="col-md-9 col-12 row q-col-gutter-md">
|
||||
<q-input
|
||||
lazy-rules="ondemand"
|
||||
:for="`${prefixId}-input-mail`"
|
||||
:id="`${prefixId}-input-mail`"
|
||||
dense
|
||||
outlined
|
||||
:readonly="readonly"
|
||||
hide-bottom-space
|
||||
class="col-md-6 col-12"
|
||||
:label="$t('formDialogInputEmail')"
|
||||
v-model="mail"
|
||||
/>
|
||||
<q-input
|
||||
lazy-rules="ondemand"
|
||||
:for="`${prefixId}-input-telephone`"
|
||||
:id="`${prefixId}-input-telephone`"
|
||||
dense
|
||||
outlined
|
||||
:readonly="readonly"
|
||||
hide-bottom-space
|
||||
class="col-md-6 col-12"
|
||||
:label="$t('formDialogInputTelephone')"
|
||||
v-model="telephone"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
|
@ -33,11 +33,10 @@ export const useCustomerForm = defineStore('form-customer', () => {
|
|||
dialogOpen: boolean;
|
||||
dialogModal: boolean;
|
||||
branchIndex: number;
|
||||
saveMode: 'customer' | 'branch';
|
||||
customerImageUrl: string;
|
||||
imageDialog: boolean;
|
||||
imageEdit: boolean;
|
||||
editReadonly: boolean;
|
||||
readonly: boolean;
|
||||
editCustomerId?: string;
|
||||
editCustomerBranchId?: string;
|
||||
}>({
|
||||
|
|
@ -45,10 +44,9 @@ export const useCustomerForm = defineStore('form-customer', () => {
|
|||
dialogOpen: false,
|
||||
dialogModal: false,
|
||||
imageDialog: false,
|
||||
branchIndex: 0,
|
||||
editReadonly: true,
|
||||
branchIndex: -1,
|
||||
readonly: true,
|
||||
imageEdit: false,
|
||||
saveMode: 'customer',
|
||||
customerImageUrl: '',
|
||||
editCustomerId: '',
|
||||
editCustomerBranchId: '',
|
||||
|
|
@ -60,12 +58,14 @@ export const useCustomerForm = defineStore('form-customer', () => {
|
|||
);
|
||||
|
||||
function isFormDataDifferent() {
|
||||
console.log(resetFormData, currentFormData.value);
|
||||
return (
|
||||
JSON.stringify(resetFormData) !== JSON.stringify(currentFormData.value)
|
||||
);
|
||||
}
|
||||
|
||||
function resetForm(clean = false) {
|
||||
state.value.branchIndex = -1;
|
||||
if (clean) {
|
||||
defaultFormData.customerType = currentFormData.value.customerType;
|
||||
currentFormData.value = structuredClone(defaultFormData);
|
||||
|
|
@ -177,143 +177,8 @@ export const useCustomerForm = defineStore('form-customer', () => {
|
|||
payDate: new Date(),
|
||||
wageRate: 0,
|
||||
});
|
||||
}
|
||||
|
||||
async function submitForm() {
|
||||
if (state.value.saveMode === 'customer') {
|
||||
const _data = await submitFormCustomer();
|
||||
if (_data) {
|
||||
await assignFormData(_data.id);
|
||||
state.value.dialogType = 'edit';
|
||||
state.value.editReadonly = true;
|
||||
state.value.editCustomerId = _data.id;
|
||||
}
|
||||
}
|
||||
if (state.value.saveMode === 'branch') {
|
||||
const _form = currentFormData.value.customerBranch?.at(
|
||||
state.value.branchIndex,
|
||||
);
|
||||
if (_form) {
|
||||
if (_form.id) {
|
||||
const _data = await customerStore.editBranchById(_form.id, {
|
||||
..._form,
|
||||
id: undefined,
|
||||
});
|
||||
if (
|
||||
_data &&
|
||||
currentFormData.value.customerBranch?.[state.value.branchIndex]
|
||||
) {
|
||||
currentFormData.value.customerBranch[state.value.branchIndex] = {
|
||||
id: _data.id,
|
||||
code: _data.code,
|
||||
branchNo: _data.branchNo,
|
||||
address: _data.address,
|
||||
addressEN: _data.addressEN,
|
||||
provinceId: _data.provinceId,
|
||||
districtId: _data.districtId,
|
||||
subDistrictId: _data.subDistrictId,
|
||||
zipCode: _data.zipCode,
|
||||
email: _data.email,
|
||||
telephoneNo: _data.telephoneNo,
|
||||
name: _data.name,
|
||||
status: undefined,
|
||||
taxNo: _data.taxNo,
|
||||
nameEN: _data.nameEN,
|
||||
legalPersonNo: _data.legalPersonNo,
|
||||
registerName: _data.registerName,
|
||||
registerDate: new Date(_data.registerDate),
|
||||
authorizedCapital: _data.authorizedCapital,
|
||||
employmentOffice: _data.employmentOffice,
|
||||
bussinessType: _data.bussinessType,
|
||||
bussinessTypeEN: _data.bussinessTypeEN,
|
||||
jobPosition: _data.jobPosition,
|
||||
jobPositionEN: _data.jobPositionEN,
|
||||
jobDescription: _data.jobDescription,
|
||||
saleEmployee: _data.saleEmployee,
|
||||
payDate: new Date(_data.payDate),
|
||||
wageRate: _data.wageRate,
|
||||
};
|
||||
if (resetFormData.customerBranch?.[state.value.branchIndex]) {
|
||||
resetFormData.customerBranch[state.value.branchIndex] =
|
||||
structuredClone(
|
||||
toRaw(
|
||||
currentFormData.value.customerBranch[
|
||||
state.value.branchIndex
|
||||
],
|
||||
),
|
||||
);
|
||||
} else {
|
||||
resetFormData.customerBranch?.push(
|
||||
structuredClone(
|
||||
toRaw(
|
||||
currentFormData.value.customerBranch[
|
||||
state.value.branchIndex
|
||||
],
|
||||
),
|
||||
),
|
||||
);
|
||||
}
|
||||
return;
|
||||
}
|
||||
}
|
||||
|
||||
if (!state.value.editCustomerId) {
|
||||
throw new Error(
|
||||
'Form mode is set to edit but no ID is provided. Make sure to set customer ID.',
|
||||
);
|
||||
}
|
||||
|
||||
const _data = await customerStore.createBranch({
|
||||
..._form,
|
||||
customerId: state.value.editCustomerId,
|
||||
id: undefined,
|
||||
});
|
||||
|
||||
if (
|
||||
_data &&
|
||||
currentFormData.value.customerBranch?.[state.value.branchIndex]
|
||||
) {
|
||||
currentFormData.value.customerBranch[state.value.branchIndex] = {
|
||||
id: _data.id,
|
||||
code: _data.code,
|
||||
branchNo: _data.branchNo,
|
||||
address: _data.address,
|
||||
addressEN: _data.addressEN,
|
||||
provinceId: _data.provinceId,
|
||||
districtId: _data.districtId,
|
||||
subDistrictId: _data.subDistrictId,
|
||||
zipCode: _data.zipCode,
|
||||
email: _data.email,
|
||||
telephoneNo: _data.telephoneNo,
|
||||
name: _data.name,
|
||||
status: undefined,
|
||||
taxNo: _data.taxNo,
|
||||
nameEN: _data.nameEN,
|
||||
legalPersonNo: _data.legalPersonNo,
|
||||
registerName: _data.registerName,
|
||||
registerDate: new Date(_data.registerDate),
|
||||
authorizedCapital: _data.authorizedCapital,
|
||||
employmentOffice: _data.employmentOffice,
|
||||
bussinessType: _data.bussinessType,
|
||||
bussinessTypeEN: _data.bussinessTypeEN,
|
||||
jobPosition: _data.jobPosition,
|
||||
jobPositionEN: _data.jobPositionEN,
|
||||
jobDescription: _data.jobDescription,
|
||||
saleEmployee: _data.saleEmployee,
|
||||
payDate: new Date(_data.payDate),
|
||||
wageRate: _data.wageRate,
|
||||
};
|
||||
if (resetFormData.customerBranch?.[state.value.branchIndex]) {
|
||||
resetFormData.customerBranch[state.value.branchIndex] =
|
||||
structuredClone(
|
||||
toRaw(
|
||||
currentFormData.value.customerBranch[state.value.branchIndex],
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
state.value.branchIndex =
|
||||
(currentFormData.value.customerBranch?.length || 0) - 1;
|
||||
}
|
||||
|
||||
async function submitFormCustomer() {
|
||||
|
|
@ -329,7 +194,7 @@ export const useCustomerForm = defineStore('form-customer', () => {
|
|||
);
|
||||
}
|
||||
|
||||
await customerStore.editById(state.value.editCustomerId, {
|
||||
const _data = await customerStore.editById(state.value.editCustomerId, {
|
||||
...currentFormData.value,
|
||||
status:
|
||||
currentFormData.value.status !== 'CREATED'
|
||||
|
|
@ -338,6 +203,13 @@ export const useCustomerForm = defineStore('form-customer', () => {
|
|||
image: currentFormData.value.image || undefined,
|
||||
customerBranch: undefined,
|
||||
});
|
||||
|
||||
if (_data) {
|
||||
await assignFormData(_data.id);
|
||||
state.value.dialogType = 'edit';
|
||||
state.value.readonly = true;
|
||||
state.value.editCustomerId = _data.id;
|
||||
}
|
||||
}
|
||||
|
||||
return {
|
||||
|
|
@ -347,7 +219,7 @@ export const useCustomerForm = defineStore('form-customer', () => {
|
|||
isFormDataDifferent,
|
||||
resetForm,
|
||||
assignFormData,
|
||||
submitForm,
|
||||
submitFormCustomer,
|
||||
addCurrentCustomerBranch,
|
||||
};
|
||||
});
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue