From f2b318060e94e4e4624c155ec0a36178c0b62207 Mon Sep 17 00:00:00 2001 From: puriphatt Date: Tue, 17 Sep 2024 18:01:13 +0700 Subject: [PATCH] refactor: customer --- .../01_branch-management/BranchCard.vue | 50 +- src/components/DrawerInfo.vue | 2 + .../03_customer-management/BranchPage.vue | 130 ++-- src/pages/03_customer-management/MainPage.vue | 565 +++++++++++------- .../components/employer/EmployerFormAbout.vue | 12 +- .../employer/EmployerFormBasicInfo.vue | 14 +- .../employer/EmployerFormBusiness.vue | 12 +- src/pages/03_customer-management/constant.ts | 33 +- src/pages/03_customer-management/form.ts | 122 ++-- src/stores/customer/index.ts | 1 + src/stores/customer/types.ts | 10 +- 11 files changed, 596 insertions(+), 355 deletions(-) diff --git a/src/components/01_branch-management/BranchCard.vue b/src/components/01_branch-management/BranchCard.vue index e8522d8e..4c5d51a9 100644 --- a/src/components/01_branch-management/BranchCard.vue +++ b/src/components/01_branch-management/BranchCard.vue @@ -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<{ >
+ +
{{ data.branchLabelName }} - {{ data.branchLabelCode }} + + {{ data.branchLabelCode }} +
@@ -74,7 +79,7 @@ defineProps<{ > {{ $t( - `branch.card.${virtualBranch ? 'branchVirtual' : 'branchLabel'}`, + `${i18nKey || 'branch.card'}.${virtualBranch ? 'branchVirtual' : 'branchLabel'}`, ) }} @@ -90,18 +95,21 @@ defineProps<{ margin-bottom: var(--size-2); " /> -
-
{{ $t(`branch.card.${key}`) }}
-
{{ data[key as keyof typeof data] }}
-
+ +
diff --git a/src/components/DrawerInfo.vue b/src/components/DrawerInfo.vue index f183a978..ccea089b 100644 --- a/src/components/DrawerInfo.vue +++ b/src/components/DrawerInfo.vue @@ -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 }} diff --git a/src/pages/03_customer-management/BranchPage.vue b/src/pages/03_customer-management/BranchPage.vue index 4b88d9e4..12e06993 100644 --- a/src/pages/03_customer-management/BranchPage.vue +++ b/src/pages/03_customer-management/BranchPage.vue @@ -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 () => { > @@ -433,9 +435,16 @@ watch([customerId, inputSearch, currentStatus], async () => {
{{ - $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 || + '-' }}
@@ -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 () => {
{ v-model:telephoneNo="customerBranchFormData.telephoneNo" v-model:codeCustomer="customerBranchFormData.codeCustomer" /> -
-
- - {{ $t('customerBranch.tab.address') }} -
-
-
{ 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" + /> +
+
+ + {{ $t('customerBranch.tab.authorized') }} +
+
+ +
+
+ + {{ $t('customerBranch.tab.address') }} +
+
+
@@ -815,8 +862,11 @@ watch([customerId, inputSearch, currentStatus], async () => {
diff --git a/src/pages/03_customer-management/MainPage.vue b/src/pages/03_customer-management/MainPage.vue index a5af371a..37a2ff2b 100644 --- a/src/pages/03_customer-management/MainPage.vue +++ b/src/pages/03_customer-management/MainPage.vue @@ -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([]); @@ -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" > + + +
{{ 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 || '-' }}
{{ 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 || '-' }}
@@ -1268,41 +1294,23 @@ const emptyCreateDialog = ref(false); }} - + {{ 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, + ) : '' : '-' }} - + {{ props.row.branch.length !== 0 - ? props.row.branch[0].workplace !== null - ? props.row.branch[0].workplace - : '' - : '-' - }} - - - - {{ - props.row.branch.length !== 0 - ? props.row.branch[0].contactName !== null - ? props.row.branch[0].contactName - : '' - : '-' - }} - - - - {{ - 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)" /> { 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); @@ -1746,9 +1818,18 @@ const emptyCreateDialog = ref(false);