refactor: customer
This commit is contained in:
puriphatt
parent
e50904bead
commit
f2b318060e
11 changed files with 596 additions and 355 deletions
|
|
@ -3,15 +3,16 @@ import { baseUrl } from 'stores/utils';
|
|||
|
||||
defineProps<{
|
||||
inactive?: boolean;
|
||||
i18nKey?: string;
|
||||
color?: 'none' | 'hq' | 'br' | 'br-virtual';
|
||||
data: {
|
||||
branchLabelCode: string;
|
||||
branchLabelCode?: string;
|
||||
branchLabelName: string;
|
||||
taxNo: string;
|
||||
branchLabelTel: string;
|
||||
contactName: string;
|
||||
branchLabelAddress: string;
|
||||
branchImgUrl: string;
|
||||
taxNo?: string;
|
||||
branchLabelTel?: string;
|
||||
contactName?: string;
|
||||
branchLabelAddress?: string;
|
||||
branchImgUrl?: string;
|
||||
};
|
||||
virtualBranch: boolean;
|
||||
metadata?: unknown;
|
||||
|
|
@ -38,7 +39,9 @@ defineProps<{
|
|||
>
|
||||
<div class="branch-card__header">
|
||||
<div class="branch-card__wrapper">
|
||||
<slot name="image"></slot>
|
||||
<q-img
|
||||
v-if="!$slots.image"
|
||||
:src="baseUrl + data.branchImgUrl"
|
||||
style="
|
||||
height: 3rem;
|
||||
|
|
@ -55,9 +58,11 @@ defineProps<{
|
|||
</template>
|
||||
</q-img>
|
||||
</div>
|
||||
<div class="branch-card__name">
|
||||
<div class="branch-card__name flex justify-center q-ml-sm">
|
||||
<b>{{ data.branchLabelName }}</b>
|
||||
<small class="branch-card__code">{{ data.branchLabelCode }}</small>
|
||||
<small class="branch-card__code" v-if="data.branchLabelCode">
|
||||
{{ data.branchLabelCode }}
|
||||
</small>
|
||||
</div>
|
||||
|
||||
<div class="branch-card__action">
|
||||
|
|
@ -74,7 +79,7 @@ defineProps<{
|
|||
>
|
||||
{{
|
||||
$t(
|
||||
`branch.card.${virtualBranch ? 'branchVirtual' : 'branchLabel'}`,
|
||||
`${i18nKey || 'branch.card'}.${virtualBranch ? 'branchVirtual' : 'branchLabel'}`,
|
||||
)
|
||||
}}
|
||||
</b>
|
||||
|
|
@ -90,18 +95,21 @@ defineProps<{
|
|||
margin-bottom: var(--size-2);
|
||||
"
|
||||
/>
|
||||
<div
|
||||
v-for="key in fieldSelected || [
|
||||
'branchLabelAddress',
|
||||
'branchLabelTel',
|
||||
'branchLabelType',
|
||||
]"
|
||||
:key="key"
|
||||
class="branch-card__data"
|
||||
>
|
||||
<div>{{ $t(`branch.card.${key}`) }}</div>
|
||||
<div>{{ data[key as keyof typeof data] }}</div>
|
||||
</div>
|
||||
<slot name="data"></slot>
|
||||
<template v-if="!$slots.data">
|
||||
<div
|
||||
v-for="key in fieldSelected || [
|
||||
'branchLabelAddress',
|
||||
'branchLabelTel',
|
||||
'branchLabelType',
|
||||
]"
|
||||
:key="key"
|
||||
class="branch-card__data"
|
||||
>
|
||||
<div>{{ $t(`${i18nKey || 'branch.card'}.${key}`) }}</div>
|
||||
<div>{{ data[key as keyof typeof data] }}</div>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
|
|
|||
|
|
@ -17,6 +17,7 @@ withDefaults(
|
|||
statusBranch?: string;
|
||||
badgeLabel?: string;
|
||||
badgeClass?: string;
|
||||
badgeStyle?: string;
|
||||
bgColor?: string;
|
||||
hideAction?: boolean;
|
||||
editData?: (...args: unknown[]) => void;
|
||||
|
|
@ -92,6 +93,7 @@ function reset() {
|
|||
v-if="badgeLabel"
|
||||
class="badge-label badge text-caption q-px-sm q-mr-sm"
|
||||
:class="badgeClass"
|
||||
:style="badgeStyle"
|
||||
>
|
||||
{{ badgeLabel }}
|
||||
</text>
|
||||
|
|
|
|||
|
|
@ -17,6 +17,7 @@ import { CustomerBranch, CustomerType } from 'stores/customer/types';
|
|||
import { columnsEmployee } from './constant';
|
||||
import { useCustomerBranchForm, useEmployeeForm } from './form';
|
||||
|
||||
import EmployerFormAuthorized from './components/employer/EmployerFormAuthorized.vue';
|
||||
import ButtonAddComponent from 'components/ButtonAddCompoent.vue';
|
||||
import SideMenu from 'components/SideMenu.vue';
|
||||
import { DialogFormContainer, DialogHeader } from 'components/dialog';
|
||||
|
|
@ -77,6 +78,7 @@ const prop = withDefaults(
|
|||
customerType: CustomerType;
|
||||
countEmployee?: number;
|
||||
gender: string;
|
||||
selectedImage: string;
|
||||
}>(),
|
||||
{
|
||||
color: 'green',
|
||||
|
|
@ -251,12 +253,12 @@ watch([customerId, inputSearch, currentStatus], async () => {
|
|||
>
|
||||
<q-avatar no-padding size="50px">
|
||||
<q-img
|
||||
:src="`${baseUrl}/customer/${customerId}/image`"
|
||||
:src="`${baseUrl}/customer/${customerId}/image/${selectedImage}`"
|
||||
class="full-height full-width"
|
||||
>
|
||||
<template #error>
|
||||
<q-img
|
||||
:src="`${customerType === 'CORP' ? `/images/customer-CORP-avartar-${gender}.png` : `/images/customer-PERS-avartar-${gender}.png`}`"
|
||||
:src="`${customerType === 'CORP' ? `/images/customer-CORP-avartar-male.png` : `/images/customer-PERS-avartar-${gender}.png`}`"
|
||||
/>
|
||||
</template>
|
||||
</q-img>
|
||||
|
|
@ -433,9 +435,16 @@ watch([customerId, inputSearch, currentStatus], async () => {
|
|||
<div class="col" style="min-width: fit-content">
|
||||
<div class="col">
|
||||
{{
|
||||
$i18n.locale === 'eng'
|
||||
? props.row.registerNameEN
|
||||
: props.row.registerName
|
||||
customerType === 'CORP'
|
||||
? $i18n.locale === 'eng'
|
||||
? props.row.registerNameEN || '-'
|
||||
: props.row.registerName || '-'
|
||||
: $i18n.locale === 'eng'
|
||||
? props.row.firstNameEN +
|
||||
' ' +
|
||||
props.row.lastNameEN || '-'
|
||||
: props.row.firstName + ' ' + props.row.lastName ||
|
||||
'-'
|
||||
}}
|
||||
</div>
|
||||
<div class="col app-text-muted">
|
||||
|
|
@ -619,6 +628,7 @@ watch([customerId, inputSearch, currentStatus], async () => {
|
|||
"
|
||||
@submit="
|
||||
async () => {
|
||||
console.log('asasd');
|
||||
const res = await customerBranchFormStore.submitForm();
|
||||
|
||||
if (res) {
|
||||
|
|
@ -718,7 +728,12 @@ watch([customerId, inputSearch, currentStatus], async () => {
|
|||
</div>
|
||||
</div>
|
||||
<EmployerFormAbout
|
||||
:index="customerBranchFormData.code"
|
||||
:readonly="customerBranchFormState.dialogType === 'info'"
|
||||
class="q-mb-xl"
|
||||
:index="
|
||||
customerBranchFormData.code &&
|
||||
Number(customerBranchFormData.code.split('-').pop()).toString()
|
||||
"
|
||||
:customer-type="customerType"
|
||||
v-model:citizen-id="customerBranchFormData.citizenId"
|
||||
v-model:prefixName="customerBranchFormData.namePrefix"
|
||||
|
|
@ -738,35 +753,6 @@ watch([customerId, inputSearch, currentStatus], async () => {
|
|||
v-model:telephoneNo="customerBranchFormData.telephoneNo"
|
||||
v-model:codeCustomer="customerBranchFormData.codeCustomer"
|
||||
/>
|
||||
<div class="row q-col-gutter-sm q-mb-sm" id="employer-branch-address">
|
||||
<div class="col-12 text-weight-bold text-body1 row items-center">
|
||||
<q-icon
|
||||
flat
|
||||
size="xs"
|
||||
class="q-pa-sm rounded q-mr-sm"
|
||||
color="info"
|
||||
name="mdi-office-building-outline"
|
||||
style="background-color: var(--surface-3)"
|
||||
/>
|
||||
<span>{{ $t('customerBranch.tab.address') }}</span>
|
||||
</div>
|
||||
</div>
|
||||
<AddressForm
|
||||
prefix-id="employer-branch"
|
||||
class="q-mb-xl"
|
||||
hide-title
|
||||
dense
|
||||
:readonly="customerBranchFormState.dialogType === 'info'"
|
||||
outlined
|
||||
:title="$t('form.address')"
|
||||
v-model:address="customerBranchFormData.address"
|
||||
v-model:addressEN="customerBranchFormData.addressEN"
|
||||
v-model:province-id="customerBranchFormData.provinceId"
|
||||
v-model:district-id="customerBranchFormData.districtId"
|
||||
v-model:sub-district-id="customerBranchFormData.subDistrictId"
|
||||
:addressTitle="$t('form.address')"
|
||||
:addressTitleEN="$t('form.address', { suffix: '(EN)' })"
|
||||
/>
|
||||
<div
|
||||
class="row q-col-gutter-sm q-mb-sm"
|
||||
id="employer-branch-business"
|
||||
|
|
@ -789,15 +775,76 @@ watch([customerId, inputSearch, currentStatus], async () => {
|
|||
outlined
|
||||
prefix-id="employer-branch"
|
||||
:readonly="customerBranchFormState.dialogType === 'info'"
|
||||
v-model:employment-office="customerBranchFormData.employmentOffice"
|
||||
v-model:bussiness-type="customerBranchFormData.businessType"
|
||||
v-model:bussiness-type-en="customerBranchFormData.businessTypeEN"
|
||||
v-model:job-position="customerBranchFormData.jobPosition"
|
||||
v-model:job-position-en="customerBranchFormData.jobPositionEN"
|
||||
v-model:job-description="customerBranchFormData.jobDescription"
|
||||
v-model:sale-employee="customerBranchFormData.saleEmployee"
|
||||
v-model:pay-date="customerBranchFormData.payDate"
|
||||
v-model:pay-date-e-n="customerBranchFormData.payDateEN"
|
||||
v-model:wage-rate="customerBranchFormData.wageRate"
|
||||
v-model:wage-rate-text="customerBranchFormData.wageRateText"
|
||||
/>
|
||||
<div class="row q-col-gutter-sm q-mb-sm" id="employer-branch-address">
|
||||
<div class="col-12 text-weight-bold text-body1 row items-center">
|
||||
<q-icon
|
||||
flat
|
||||
size="xs"
|
||||
class="q-pa-sm rounded q-mr-sm"
|
||||
color="info"
|
||||
name="mdi-office-building-outline"
|
||||
style="background-color: var(--surface-3)"
|
||||
/>
|
||||
<span>{{ $t('customerBranch.tab.authorized') }}</span>
|
||||
</div>
|
||||
</div>
|
||||
<EmployerFormAuthorized
|
||||
class="q-mb-xl"
|
||||
prefix-id="employer-branch"
|
||||
:readonly="customerBranchFormState.dialogType === 'info'"
|
||||
v-model:authorized-name="customerBranchFormData.authorizedName"
|
||||
v-model:authorized-name-e-n="
|
||||
customerBranchFormData.authorizedNameEN
|
||||
"
|
||||
/>
|
||||
<div class="row q-col-gutter-sm q-mb-sm" id="employer-branch-address">
|
||||
<div class="col-12 text-weight-bold text-body1 row items-center">
|
||||
<q-icon
|
||||
flat
|
||||
size="xs"
|
||||
class="q-pa-sm rounded q-mr-sm"
|
||||
color="info"
|
||||
name="mdi-office-building-outline"
|
||||
style="background-color: var(--surface-3)"
|
||||
/>
|
||||
<span>{{ $t('customerBranch.tab.address') }}</span>
|
||||
</div>
|
||||
</div>
|
||||
<AddressForm
|
||||
prefix-id="employer-branch"
|
||||
class="q-mb-xl"
|
||||
hide-title
|
||||
use-employment
|
||||
dense
|
||||
:readonly="customerBranchFormState.dialogType === 'info'"
|
||||
outlined
|
||||
:title="$t('form.address')"
|
||||
v-model:homeCode="customerBranchFormData.homeCode"
|
||||
v-model:employmentOffice="customerBranchFormData.employmentOffice"
|
||||
v-model:employmentOfficeEN="
|
||||
customerBranchFormData.employmentOfficeEN
|
||||
"
|
||||
v-model:address="customerBranchFormData.address"
|
||||
v-model:addressEN="customerBranchFormData.addressEN"
|
||||
v-model:province-id="customerBranchFormData.provinceId"
|
||||
v-model:district-id="customerBranchFormData.districtId"
|
||||
v-model:sub-district-id="customerBranchFormData.subDistrictId"
|
||||
v-model:street="customerBranchFormData.street"
|
||||
v-model:streetEN="customerBranchFormData.streetEN"
|
||||
v-model:moo="customerBranchFormData.moo"
|
||||
v-model:mooEN="customerBranchFormData.mooEN"
|
||||
v-model:soi="customerBranchFormData.soi"
|
||||
v-model:soiEN="customerBranchFormData.soiEN"
|
||||
:addressTitle="$t('form.address')"
|
||||
:addressTitleEN="$t('form.address', { suffix: '(EN)' })"
|
||||
/>
|
||||
<div class="row q-col-gutter-sm q-mb-sm" id="employer-branch-contact">
|
||||
<div class="col-12 text-weight-bold text-body1 row items-center">
|
||||
|
|
@ -815,8 +862,11 @@ watch([customerId, inputSearch, currentStatus], async () => {
|
|||
<EmployerFormContact
|
||||
class="q-mb-lg"
|
||||
:readonly="customerBranchFormState.dialogType === 'info'"
|
||||
v-model:contactName="customerBranchFormData.contactName"
|
||||
v-model:email="customerBranchFormData.email"
|
||||
v-model:telephone="customerBranchFormData.telephoneNo"
|
||||
v-model:contactTel="customerBranchFormData.contactTel"
|
||||
v-model:officeTel="customerBranchFormData.officeTel"
|
||||
v-model:agent="customerBranchFormData.agent"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -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();
|
||||
}
|
||||
"
|
||||
>
|
||||
|
|
|
|||
|
|
@ -191,7 +191,7 @@ watch(
|
|||
:rules="[
|
||||
(val: string) => !!val || $t('form.error.required'),
|
||||
(val: string) =>
|
||||
/^[A-Za-z\s.,]+$/.test(val) || $t('form.error.letterOnly'),
|
||||
/^[0-9A-Za-z\s.,]+$/.test(val) || $t('form.error.letterOnly'),
|
||||
]"
|
||||
/>
|
||||
</div>
|
||||
|
|
@ -248,7 +248,7 @@ watch(
|
|||
</template>
|
||||
|
||||
<template v-if="customerType === 'PERS'">
|
||||
<div class="col-6 row q-col-gutter-sm">
|
||||
<div class="col-7 row q-col-gutter-sm">
|
||||
<q-input
|
||||
dense
|
||||
outlined
|
||||
|
|
@ -264,7 +264,7 @@ watch(
|
|||
<q-input
|
||||
dense
|
||||
outlined
|
||||
:disable="index !== '0'"
|
||||
:disable="index !== '0' && !readonly"
|
||||
:readonly="readonly"
|
||||
hide-bottom-space
|
||||
class="col-12 col-md-7"
|
||||
|
|
@ -283,7 +283,7 @@ watch(
|
|||
/>
|
||||
</div>
|
||||
|
||||
<div class="col-8 row q-col-gutter-sm">
|
||||
<div class="col-9 row q-col-gutter-sm">
|
||||
<q-select
|
||||
outlined
|
||||
use-input
|
||||
|
|
@ -342,7 +342,7 @@ watch(
|
|||
/>
|
||||
</div>
|
||||
|
||||
<div class="col-8 row q-col-gutter-sm">
|
||||
<div class="col-9 row q-col-gutter-sm">
|
||||
<q-input
|
||||
:for="`${prefixId}-input-first-name`"
|
||||
dense
|
||||
|
|
@ -387,7 +387,7 @@ watch(
|
|||
/>
|
||||
</div>
|
||||
|
||||
<div class="row col-8 q-col-gutter-sm">
|
||||
<div class="row col-9 q-col-gutter-sm">
|
||||
<q-input
|
||||
:for="`${prefixId}-input-telephone`"
|
||||
dense
|
||||
|
|
|
|||
|
|
@ -39,15 +39,15 @@ const registeredBranchId = defineModel<string>('registeredBranchId', {
|
|||
required: true,
|
||||
});
|
||||
|
||||
const customerName = defineModel<string>('customerName');
|
||||
const registerName = defineModel<string>('registerName');
|
||||
const customerName = defineModel<string>('customerName', { default: '' });
|
||||
const registerName = defineModel<string>('registerName', { default: '' });
|
||||
|
||||
const citizenId = defineModel<string>('citizenId');
|
||||
const legalPersonNo = defineModel<string>('legalPersonNo');
|
||||
const citizenId = defineModel<string>('citizenId', { default: '' });
|
||||
const legalPersonNo = defineModel<string>('legalPersonNo', { default: '' });
|
||||
|
||||
const businessType = defineModel<'strinf'>('businessType');
|
||||
const jobPosition = defineModel<'strinf'>('jobPosition');
|
||||
const telephoneNo = defineModel<string>('telephoneNo');
|
||||
const businessType = defineModel<'string'>('businessType');
|
||||
const jobPosition = defineModel<'string'>('jobPosition');
|
||||
const telephoneNo = defineModel<string>('telephoneNo', { default: '' });
|
||||
|
||||
const branchOptions = defineModel<{ id: string; name: string }[]>(
|
||||
'branchOptions',
|
||||
|
|
|
|||
|
|
@ -110,7 +110,7 @@ let jobPositionENFilter = selectFilterOptionRefMod(
|
|||
map-options
|
||||
hide-selected
|
||||
hide-bottom-space
|
||||
hide-dropdown-icon
|
||||
:hide-dropdown-icon="readonly"
|
||||
input-debounce="0"
|
||||
option-value="value"
|
||||
option-label="label"
|
||||
|
|
@ -122,6 +122,7 @@ let jobPositionENFilter = selectFilterOptionRefMod(
|
|||
:options="typeBusinessOptions"
|
||||
:for="`${prefixId}-select-business-type`"
|
||||
@filter="typeBusinessFilter"
|
||||
:rules="[(val: string) => !!val || $t('form.error.required')]"
|
||||
>
|
||||
<template v-slot:no-option>
|
||||
<q-item>
|
||||
|
|
@ -143,7 +144,7 @@ let jobPositionENFilter = selectFilterOptionRefMod(
|
|||
map-options
|
||||
hide-selected
|
||||
hide-bottom-space
|
||||
hide-dropdown-icon
|
||||
:hide-dropdown-icon="readonly"
|
||||
input-debounce="0"
|
||||
option-value="value"
|
||||
option-label="label"
|
||||
|
|
@ -153,6 +154,7 @@ let jobPositionENFilter = selectFilterOptionRefMod(
|
|||
:readonly="readonly"
|
||||
:options="typeBusinessENOptions"
|
||||
@filter="typeBusinessENFilter"
|
||||
:rules="[(val: string) => !!val || $t('form.error.required')]"
|
||||
>
|
||||
<template v-slot:no-option>
|
||||
<q-item>
|
||||
|
|
@ -172,7 +174,7 @@ let jobPositionENFilter = selectFilterOptionRefMod(
|
|||
map-options
|
||||
hide-selected
|
||||
hide-bottom-space
|
||||
hide-dropdown-icon
|
||||
:hide-dropdown-icon="readonly"
|
||||
input-debounce="0"
|
||||
option-value="value"
|
||||
option-label="label"
|
||||
|
|
@ -184,6 +186,7 @@ let jobPositionENFilter = selectFilterOptionRefMod(
|
|||
:options="jobPositionOptions"
|
||||
:for="`${prefixId}-select-job-position`"
|
||||
@filter="jobPositionFilter"
|
||||
:rules="[(val: string) => !!val || $t('form.error.required')]"
|
||||
>
|
||||
<template v-slot:no-option>
|
||||
<q-item>
|
||||
|
|
@ -203,7 +206,7 @@ let jobPositionENFilter = selectFilterOptionRefMod(
|
|||
map-options
|
||||
hide-selected
|
||||
hide-bottom-space
|
||||
hide-dropdown-icon
|
||||
:hide-dropdown-icon="readonly"
|
||||
input-debounce="0"
|
||||
option-value="value"
|
||||
option-label="label"
|
||||
|
|
@ -216,6 +219,7 @@ let jobPositionENFilter = selectFilterOptionRefMod(
|
|||
:for="`${prefixId}-input-job-position-en`"
|
||||
:id="`${prefixId}-input-job-position-en`"
|
||||
@filter="jobPositionENFilter"
|
||||
:rules="[(val: string) => !!val || $t('form.error.required')]"
|
||||
>
|
||||
<template v-slot:no-option>
|
||||
<q-item>
|
||||
|
|
|
|||
|
|
@ -207,10 +207,10 @@ export const columnsCustomer = [
|
|||
},
|
||||
|
||||
{
|
||||
name: 'customerName',
|
||||
name: 'fullname',
|
||||
align: 'left',
|
||||
label: 'customer.table.fullname',
|
||||
field: 'customerName',
|
||||
field: 'fullname',
|
||||
sortable: true,
|
||||
},
|
||||
|
||||
|
|
@ -223,30 +223,17 @@ export const columnsCustomer = [
|
|||
},
|
||||
|
||||
{
|
||||
name: 'address',
|
||||
align: 'left',
|
||||
label: 'customer.table.address',
|
||||
field: 'address',
|
||||
name: 'jobPosition',
|
||||
align: 'center',
|
||||
label: 'customer.table.jobPosition',
|
||||
field: 'jobPosition',
|
||||
sortable: true,
|
||||
},
|
||||
|
||||
{
|
||||
name: 'workPlace',
|
||||
name: 'officeTel',
|
||||
align: 'left',
|
||||
label: 'customer.table.workPlace',
|
||||
field: 'workPlace',
|
||||
},
|
||||
|
||||
{
|
||||
name: 'contactName',
|
||||
align: 'left',
|
||||
label: 'customer.table.contactName',
|
||||
field: 'contactName',
|
||||
},
|
||||
|
||||
{
|
||||
name: 'contactPhone',
|
||||
align: 'left',
|
||||
label: 'customer.table.contactPhone',
|
||||
field: 'contactPhone',
|
||||
label: 'customer.table.officeTel',
|
||||
field: 'officeTel',
|
||||
},
|
||||
] satisfies QTableProps['columns'];
|
||||
|
|
|
|||
|
|
@ -87,9 +87,10 @@ export const useCustomerForm = defineStore('form-customer', () => {
|
|||
}
|
||||
|
||||
function isFormDataDifferent() {
|
||||
return (
|
||||
JSON.stringify(resetFormData) !== JSON.stringify(currentFormData.value)
|
||||
);
|
||||
const { status: resetStatus, ...resetData } = resetFormData;
|
||||
const { status: currStatus, ...currData } = currentFormData.value;
|
||||
|
||||
return JSON.stringify(resetData) !== JSON.stringify(currData);
|
||||
}
|
||||
|
||||
function resetForm(clean = false) {
|
||||
|
|
@ -155,7 +156,6 @@ export const useCustomerForm = defineStore('form-customer', () => {
|
|||
wageRate: v.wageRate,
|
||||
wageRateText: v.wageRateText,
|
||||
payDate: v.payDate,
|
||||
saleEmployee: v.saleEmployee,
|
||||
jobDescription: v.jobDescription,
|
||||
jobPositionEN: v.jobPositionEN,
|
||||
jobPosition: v.jobPosition,
|
||||
|
|
@ -177,8 +177,6 @@ export const useCustomerForm = defineStore('form-customer', () => {
|
|||
soi: v.soi,
|
||||
addressEN: v.addressEN,
|
||||
address: v.address,
|
||||
workplaceEN: v.workplaceEN,
|
||||
workplace: v.workplace,
|
||||
authorizedCapital: v.authorizedCapital,
|
||||
registerDate: v.registerDate,
|
||||
registerNameEN: v.registerNameEN,
|
||||
|
|
@ -362,38 +360,63 @@ export const useCustomerBranchForm = defineStore('form-customer-branch', () => {
|
|||
const customerStore = useCustomerStore();
|
||||
const customerFormStore = useCustomerForm();
|
||||
|
||||
const defaultFormData: CustomerBranchCreate & { id?: string } = {
|
||||
code: '',
|
||||
customerCode: '',
|
||||
const defaultFormData: CustomerBranchCreate & {
|
||||
id?: string;
|
||||
codeCustomer?: string;
|
||||
} = {
|
||||
id: '',
|
||||
customerId: '',
|
||||
// branchCode: '',
|
||||
// codeCustomer: '',
|
||||
|
||||
legalPersonNo: '',
|
||||
citizenId: '',
|
||||
namePrefix: '',
|
||||
firstName: '',
|
||||
lastName: '',
|
||||
firstNameEN: '',
|
||||
lastNameEN: '',
|
||||
telephoneNo: '',
|
||||
gender: '',
|
||||
birthDate: '',
|
||||
|
||||
businessType: '',
|
||||
jobPosition: '',
|
||||
jobDescription: '',
|
||||
payDate: '',
|
||||
payDateEN: '',
|
||||
wageRate: 0,
|
||||
wageRateText: '',
|
||||
homeCode: '',
|
||||
employmentOffice: '',
|
||||
employmentOfficeEN: '',
|
||||
|
||||
address: '',
|
||||
addressEN: '',
|
||||
street: '',
|
||||
streetEN: '',
|
||||
moo: '',
|
||||
mooEN: '',
|
||||
soi: '',
|
||||
soiEN: '',
|
||||
provinceId: '',
|
||||
districtId: '',
|
||||
subDistrictId: '',
|
||||
wageRate: 0,
|
||||
payDate: '',
|
||||
payDateEN: '',
|
||||
saleEmployee: '',
|
||||
jobDescription: '',
|
||||
jobPositionEN: '',
|
||||
jobPosition: '',
|
||||
businessTypeEN: '',
|
||||
businessType: '',
|
||||
employmentOffice: '',
|
||||
telephoneNo: '',
|
||||
email: '',
|
||||
addressEN: '',
|
||||
address: '',
|
||||
workplaceEN: '',
|
||||
workplace: '',
|
||||
status: 'CREATED',
|
||||
customerId: '',
|
||||
citizenId: '',
|
||||
authorizedCapital: '',
|
||||
registerDate: new Date(), // Convert the string to a Date object
|
||||
registerNameEN: '',
|
||||
registerName: '',
|
||||
legalPersonNo: '',
|
||||
statusSave: false,
|
||||
|
||||
contactName: '',
|
||||
email: '',
|
||||
contactTel: '',
|
||||
officeTel: '',
|
||||
agent: '',
|
||||
status: 'CREATED',
|
||||
|
||||
customerName: '',
|
||||
registerName: '',
|
||||
registerNameEN: '',
|
||||
registerDate: null,
|
||||
authorizedCapital: '',
|
||||
authorizedName: '',
|
||||
authorizedNameEN: '',
|
||||
file: [],
|
||||
};
|
||||
|
||||
|
|
@ -427,8 +450,8 @@ export const useCustomerBranchForm = defineStore('form-customer-branch', () => {
|
|||
const _data = await customerStore.getBranchById(id);
|
||||
|
||||
if (!_data) return;
|
||||
|
||||
resetFormData = {
|
||||
id: _data.id,
|
||||
code: _data.code,
|
||||
customerCode: '',
|
||||
provinceId: _data.provinceId,
|
||||
|
|
@ -437,19 +460,15 @@ export const useCustomerBranchForm = defineStore('form-customer-branch', () => {
|
|||
wageRate: _data.wageRate,
|
||||
payDate: _data.payDate, // Convert the string to a Date object
|
||||
payDateEN: _data.payDateEN,
|
||||
saleEmployee: _data.saleEmployee,
|
||||
jobDescription: _data.jobDescription,
|
||||
jobPositionEN: _data.jobPositionEN,
|
||||
jobPosition: _data.jobPosition,
|
||||
businessTypeEN: _data.businessTypeEN,
|
||||
businessType: _data.businessType,
|
||||
employmentOffice: _data.employmentOffice,
|
||||
employmentOfficeEN: _data.employmentOfficeEN,
|
||||
telephoneNo: _data.telephoneNo,
|
||||
email: _data.email,
|
||||
addressEN: _data.addressEN,
|
||||
address: _data.address,
|
||||
workplaceEN: _data.workplaceEN,
|
||||
workplace: _data.workplace,
|
||||
status: 'CREATED',
|
||||
customerId: _data.customerId,
|
||||
citizenId: _data.citizenId,
|
||||
|
|
@ -459,6 +478,28 @@ export const useCustomerBranchForm = defineStore('form-customer-branch', () => {
|
|||
registerName: _data.registerName,
|
||||
legalPersonNo: _data.legalPersonNo,
|
||||
contactName: _data.contactName,
|
||||
namePrefix: _data.namePrefix,
|
||||
firstName: _data.firstName,
|
||||
firstNameEN: _data.firstNameEN,
|
||||
lastName: _data.lastName,
|
||||
lastNameEN: _data.lastNameEN,
|
||||
gender: _data.gender,
|
||||
birthDate: _data.birthDate,
|
||||
moo: _data.moo,
|
||||
mooEN: _data.mooEN,
|
||||
soi: _data.soi,
|
||||
soiEN: _data.soiEN,
|
||||
street: _data.street,
|
||||
streetEN: _data.streetEN,
|
||||
wageRateText: _data.wageRateText,
|
||||
contactTel: _data.contactTel,
|
||||
officeTel: _data.officeTel,
|
||||
agent: _data.agent,
|
||||
codeCustomer: _data.codeCustomer,
|
||||
customerName: _data.customerName,
|
||||
homeCode: _data.homeCode,
|
||||
authorizedName: _data.authorizedName,
|
||||
authorizedNameEN: _data.authorizedNameEN,
|
||||
statusSave: false,
|
||||
file: [],
|
||||
};
|
||||
|
|
@ -482,6 +523,7 @@ export const useCustomerBranchForm = defineStore('form-customer-branch', () => {
|
|||
);
|
||||
|
||||
async function submitForm() {
|
||||
console.log(currentFormData.value);
|
||||
if (!state.value.currentCustomerId) {
|
||||
throw new Error(
|
||||
'Employer id cannot be found. Did you properly set employer id?',
|
||||
|
|
|
|||
|
|
@ -441,6 +441,7 @@ const useCustomerStore = defineStore('api-customer', () => {
|
|||
statusOrder,
|
||||
updatedAt,
|
||||
updatedByUserId,
|
||||
customerCode,
|
||||
file,
|
||||
registerCompanyName,
|
||||
statusSave,
|
||||
|
|
|
|||
|
|
@ -5,24 +5,18 @@ export type CustomerType = 'CORP' | 'PERS';
|
|||
|
||||
export type Customer = {
|
||||
registeredBranchId: string;
|
||||
selectedImage: string;
|
||||
imageUrl: string;
|
||||
id: string;
|
||||
code: string;
|
||||
customerType: CustomerType;
|
||||
status: Status;
|
||||
|
||||
namePrefix: string;
|
||||
firstName: string;
|
||||
lastName: string;
|
||||
firstNameEN: string;
|
||||
lastNameEN: string;
|
||||
gender: string;
|
||||
birthDate: Date;
|
||||
|
||||
createdBy: string | null;
|
||||
createdAt: string;
|
||||
updatedBy: string | null;
|
||||
updatedAt: string;
|
||||
branch: CustomerBranch[];
|
||||
|
||||
_count: {
|
||||
employee: number;
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue