chamomind/jws-frontend
chamomind/jws-frontend
6
0
Fork 0
Code Issues Projects Releases Packages 1 Wiki Activity Actions

refactor: customer

Browse source
This commit is contained in:
puriphatt 2024-09-17 10:00:35 +07:00
parent 2ab96dc816
commit 234b03c7fa
12 changed files with 372 additions and 978 deletions
Download patch file Download diff file Expand all files Collapse all files

183
src/pages/03_customer-management/MainPage.vue
View file

@ -1,5 +1,5 @@
<script setup lang="ts">
import { ref, watch, onMounted } from 'vue';
import { ref, watch, onMounted, computed } from 'vue';
import { useI18n } from 'vue-i18n';
import { useQuasar } from 'quasar';
import { useRoute, useRouter } from 'vue-router';
@ -121,7 +121,13 @@ async function init() {
if (_data) {
currentCustomer.value = _data;
utilsStore.currentTitle.path.push({
text: `${currentCustomer.value.firstName || '-'} ${currentCustomer.value.lastName || ''}`,
text: `${
_data.customerType === 'CORP'
? _data.branch[0].registerName
: locale.value === 'eng'
? _data.branch[0].firstNameEN + ' ' + _data.branch[0].lastNameEN
: _data.branch[0].firstName + ' ' + _data.branch[0].lastName
}`,
i18n: false,
});
} else {
@ -154,6 +160,13 @@ const customerTypeSelected = ref<{
value: 'all',
});
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}`;
return name || '-';
});
const currentBtnOpen = ref<boolean[]>([]);
const employeeStats = ref(0);
const gridView = ref(false);
@ -482,7 +495,7 @@ async function openHistory(id: string) {
employeeHistoryDialog.value = true;
}
async function editCustomerForm(id: string) {
async function editCustomerForm(id: string, view?: boolean) {
await customerFormStore.assignFormData(id);
await fetchListOfOptionBranch();
await fetchImageList(
@ -490,6 +503,7 @@ async function editCustomerForm(id: string) {
customerFormData.value.selectedImage || '',
'customer',
);
customerFormState.value.branchIndex = -1;
customerFormState.value.dialogType = 'edit';
customerFormState.value.drawerModal = true;
customerFormState.value.editCustomerId = id;
@ -1212,7 +1226,7 @@ const emptyCreateDialog = ref(false);
>
<template #error>
<q-img
:src="`${props.row.customerType === 'CORP' ? `/images/customer-CORP-avartar-${props.row.gender}.png` : `/images/customer-PERS-avartar-${props.row.gender}.png`}`"
:src="`/images/customer-${props.row.customerType}-avartar-${props.row.customerType === 'PERS' ? props.row.branch[0].gender : 'male'}.png`"
/>
</template>
</q-img>
@ -1222,12 +1236,22 @@ const emptyCreateDialog = ref(false);
</div>
<div class="col">
<div class="col">
{{ props.row.firstName }}
{{ props.row.lastName }}
{{
props.row.customerType === 'CORP'
? props.row.branch[0].registerName || '-'
: props.row.branch[0].firstName +
' ' +
props.row.branch[0].lastName || '-'
}}
</div>
<div class="col app-text-muted">
{{ props.row.firstNameEN || '-' }}
{{ props.row.lastNameEN || '-' }}
{{
props.row.customerType === 'CORP'
? props.row.branch[0].registerNameEN || '-'
: props.row.branch[0].firstNameEN +
' ' +
props.row.branch[0].lastNameEN || '-'
}}
</div>
</div>
</div>
@ -1236,7 +1260,9 @@ const emptyCreateDialog = ref(false);
{{
props.row.branch.length !== 0
? props.row.branch[0].businessType !== null
? props.row.branch[0].businessType
? optionStore.mapOption(
props.row.branch[0].businessType,
)
: ''
: '-'
}}
@ -1327,7 +1353,7 @@ const emptyCreateDialog = ref(false);
dense
round
flat
@click.stop="editCustomerForm(props.row.id)"
@click.stop="editCustomerForm(props.row.id, true)"
/>
<KebabAction
@ -1337,7 +1363,7 @@ const emptyCreateDialog = ref(false);
() => {
const { branch, ...payload } = props.row;
currentCustomer = payload;
editCustomerForm(props.row.id);
editCustomerForm(props.row.id, true);
}
"
@edit="
@ -1420,10 +1446,18 @@ const emptyCreateDialog = ref(false);
code: props.row.code,
name:
$i18n.locale === 'eng'
? `${props.row.firstNameEN} ${props.row.lastNameEN} `.trim()
: `${props.row.firstName} ${props.row.lastName} `.trim(),
? 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.gender}.png`,
fallbackImg: `/images/customer-${props.row.customerType}-avartar-${props.row.customerType === 'PERS' ? props.row.branch[0].gender : 'male'}.png`,
male: undefined,
female: undefined,
detail: [
@ -1469,7 +1503,7 @@ const emptyCreateDialog = ref(false);
() => {
const { branch, ...payload } = props.row;
currentCustomer = payload;
editCustomerForm(props.row.id);
editCustomerForm(props.row.id, true);
}
"
@delete-card="deleteCustomerById(props.row.id)"
@ -1766,6 +1800,7 @@ const emptyCreateDialog = ref(false);
async () => {
customerFormStore.resetForm(customerFormState.dialogType === 'create');
onCreateImageList = { selectedImage: '', list: [] };
customerFormState.customerImageUrl = '';
await fetchListOfOptionBranch();
await customerFormStore.addCurrentCustomerBranch();
}
@ -1805,11 +1840,8 @@ const emptyCreateDialog = ref(false);
active
hide-fade
:fallback-cover="`/images/customer-${customerFormData.customerType}-banner-bg.jpg`"
:img="
customerFormState.customerImageUrl ||
`/images/customer-${customerFormData.customerType}-avartar-${customerFormData.gender}.png`
"
:fallbackImg="`/images/customer-${customerFormData.customerType}-avartar-${customerFormData.gender}.png`"
:img="customerFormState.customerImageUrl || null"
:fallbackImg="`/images/customer-PERS-avartar-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="
@ -1875,50 +1907,36 @@ const emptyCreateDialog = ref(false);
id="customer-form-content"
style="height: 100%; max-height: 100%; overflow-y: auto"
>
<q-form
@submit.prevent="
async () => {
console.log(customerFormData);
// await customerFormStore.submitFormCustomer(onCreateImageList);
// customerFormState.readonly = true;
notify('create', $t('general.success'));
// await fetchListCustomer();
}
<EmployerFormBasicInfo
class="q-mb-xl"
:readonly="
(customerFormState.dialogType === 'edit' &&
customerFormState.readonly === true) ||
customerFormState.dialogType === 'info'
"
greedy
>
<!-- :create="customerFormState.dialogType === 'create'" -->
<EmployerFormBasicInfo
class="q-mb-xl"
:readonly="
(customerFormState.dialogType === 'edit' &&
customerFormState.readonly === true) ||
customerFormState.dialogType === 'info'
"
:action-disabled="customerFormState.branchIndex !== -1"
id="form-basic-info-customer"
:create="false"
@edit="
(customerFormState.dialogType = 'edit'),
(customerFormState.readonly = false)
"
@cancel="() => customerFormUndo(false)"
@delete="
customerFormState.editCustomerId &&
deleteCustomerById(customerFormState.editCustomerId)
"
: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:branch-options="registerAbleBranchOption"
/>
</q-form>
:action-disabled="customerFormState.branchIndex !== -1"
id="form-basic-info-customer"
:onCreate="customerFormState.dialogType === 'create'"
@edit="
(customerFormState.dialogType = 'edit'),
(customerFormState.readonly = false)
"
@cancel="() => customerFormUndo(false)"
@delete="
customerFormState.editCustomerId &&
deleteCustomerById(customerFormState.editCustomerId)
"
:customer-type="customerFormData.customerType"
v-model: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:branch-options="registerAbleBranchOption"
/>
<div class="row q-col-gutter-sm" id="form-branch-customer-branch">
<div class="col-12 text-weight-bold text-body1 row items-center">
<q-icon
@ -2062,6 +2080,7 @@ const emptyCreateDialog = ref(false);
:index="idx"
v-model:customer="customerFormData"
v-model:customer-branch="customerFormData.customerBranch[idx]"
:onCreate="customerFormState.dialogType === 'create'"
:customer-type="customerFormData.customerType"
:customer-name="`${customerFormData.firstName} ${customerFormData.lastName}`"
:readonly="customerFormState.branchIndex !== idx"
@ -2962,8 +2981,8 @@ const emptyCreateDialog = ref(false);
return false;
} else {
fetchListCustomer();
customerFormStore.resetForm(true);
customerFormState.branchIndex = -1;
customerFormStore.resetForm(true);
}
return false;
}
@ -2980,7 +2999,7 @@ const emptyCreateDialog = ref(false);
refreshImageState ? `?ts=${Date.now()}` : '',
) || null
"
:fallbackImg="`/images/customer-${customerFormData.customerType}-avartar-${customerFormData.gender}.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="
@ -3050,6 +3069,7 @@ const emptyCreateDialog = ref(false);
style="height: 100%; max-height: 100%; overflow-y: auto"
>
<EmployerFormBasicInfo
v-if="customerFormData.customerBranch.length > 0"
:readonly="
(customerFormState.dialogType === 'edit' &&
customerFormState.readonly === true) ||
@ -3058,7 +3078,7 @@ const emptyCreateDialog = ref(false);
:hide-action="customerFormData.status === 'INACTIVE'"
:action-disabled="customerFormState.branchIndex !== -1"
id="form-basic-info-customer"
:create="customerFormState.dialogType === 'create'"
:onCreate="customerFormState.dialogType === 'create'"
@edit="
(customerFormState.dialogType = 'edit'),
(customerFormState.readonly = false)
@ -3069,16 +3089,25 @@ const emptyCreateDialog = ref(false);
deleteCustomerById(customerFormState.editCustomerId)
"
:customer-type="customerFormData.customerType"
v-model:code="customerFormData.code"
v-model:registered-branch-id="customerFormData.registeredBranchId"
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"
v-model:first-name="customerFormData.firstName"
v-model:last-name="customerFormData.lastName"
v-model:first-name-en="customerFormData.firstNameEN"
v-model:last-name-en="customerFormData.lastNameEN"
v-model:name-prefix="customerFormData.namePrefix"
v-model:gender="customerFormData.gender"
v-model:birth-date="customerFormData.birthDate"
/>
<!-- <div class="row q-col-gutter-sm q-mb-xl">
@ -3096,11 +3125,7 @@ const emptyCreateDialog = ref(false);
<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,
}"
class="col-12 text-weight-bold text-body1 row items-center q-mt-lg"
>
<q-icon
flat