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

refactor: customer table and card

Browse source
This commit is contained in:
puriphatt 2024-09-18 11:41:03 +07:00
parent 72dbab6b33
commit 2dc6902ff5
4 changed files with 105 additions and 53 deletions
Download patch file Download diff file Expand all files Collapse all files

1
src/i18n/eng/index.ts
View file

@ -366,6 +366,7 @@ export default {
table: {
orderNumber: 'No.',
fullname: 'Full Name',
titleName: 'Name',
businessTypePure: 'Business Type',
jobPosition: 'Job Position',
address: 'Address',

1
src/i18n/tha/index.ts
View file

@ -366,6 +366,7 @@ export default {
table: {
orderNumber: 'ลําดับ',
fullname: 'ชื่อ-นามสกุล',
titleName: 'ชื่อ บริษัท/นิติบุคคล',
businessTypePure: 'ประเภทกิจการ',
jobPosition: 'ตำแหน่งงาน',
address: 'ที่อยู่',

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

@ -914,7 +914,16 @@ const emptyCreateDialog = ref(false);
class="q-ml-sm col"
:options="
currentTab === 'employer'
? fieldDisplayCustomer
? gridView
? fieldDisplayCustomer.filter((v) => {
return (
v.value !== 'orderNumber' &&
v.value !== 'titleName' &&
v.value !== 'address' &&
v.value !== 'contactName'
);
})
: fieldDisplayCustomer
: fieldDisplayEmployee
"
:display-value="$t('general.displayField')"
@ -1176,7 +1185,10 @@ const emptyCreateDialog = ref(false);
}}
</q-td>
<q-td v-if="fieldSelected.includes('fullname')">
<q-td
v-if="fieldSelected.includes('titleName')"
style="padding-block: 7px; padding-inline: 0px"
>
<div class="row items-center">
<div
class="q-mr-sm"
@ -1238,7 +1250,7 @@ const emptyCreateDialog = ref(false);
? optionStore.mapOption(
props.row.branch[0].businessType,
)
: ''
: '-'
: '-'
}}
</q-td>
@ -1250,21 +1262,29 @@ const emptyCreateDialog = ref(false);
? optionStore.mapOption(
props.row.branch[0].jobPosition,
)
: ''
: '-'
: '-'
}}
</q-td>
<q-td v-if="fieldSelected.includes('officeTel')">
<q-td v-if="fieldSelected.includes('address')">
{{
props.row.branch.length !== 0
? props.row.branch[0].officeTel !== null
? props.row.branch[0].officeTel
: ''
? props.row.branch[0].address !== null
? `${props.row.branch[0].address} ${props.row.branch[0].moo} ${props.row.branch[0].soi} ${props.row.branch[0].street} จ.${props.row.branch[0].province.name} อ.${props.row.branch[0].district.name} ต.${props.row.branch[0].subDistrict.name} ${props.row.branch[0].subDistrict.zipCode}`
: '-'
: '-'
}}
</q-td>
<q-td v-if="fieldSelected.includes('contactName')">
{{ props.row.branch[0]?.contactName || '-' }}
</q-td>
<q-td v-if="fieldSelected.includes('officeTel')">
{{ props.row.branch[0]?.officeTel || '-' }}
</q-td>
<q-td>
<q-btn
dense
@ -1423,12 +1443,7 @@ const emptyCreateDialog = ref(false);
: 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) => {
@ -1452,8 +1467,8 @@ const emptyCreateDialog = ref(false);
class="absolute-bottom-right no-padding"
style="
border-radius: 50%;
min-width: 11.31px;
min-height: 11.31px;
min-width: 10px;
min-height: 10px;
"
:style="{
background: `var(--${props.row.status === 'INACTIVE' ? 'stone-5' : 'green-6'})`,
@ -1469,6 +1484,22 @@ const emptyCreateDialog = ref(false);
padding-block: var(--size-2);
"
>
<div class="col-12 q-py-sm row">
<span class="col-4 app-text-muted">
{{
props.row.customerType === 'CORP'
? $t('customer.form.legalPersonCode')
: $t('customer.form.cardNumber')
}}
</span>
<span class="col">
{{
props.row.customerType === 'CORP'
? props.row.branch[0]?.legalPersonNo
: props.row.branch[0]?.citizenId
}}
</span>
</div>
<div
class="col-12 q-py-sm row"
v-for="key in fieldSelected
@ -1479,7 +1510,10 @@ const emptyCreateDialog = ref(false);
})
.filter((v) => {
return (
v !== 'orderNumber' && v !== 'fullname'
v !== 'orderNumber' &&
v !== 'titleName' &&
v !== 'address' &&
v !== 'contactName'
);
})"
:key="key"
@ -1927,6 +1961,7 @@ const emptyCreateDialog = ref(false);
{
name: $t('customer.form.group.branch'),
anchor: 'form-branch-customer-branch',
useBtn: true,
},
...(customerFormData.customerBranch?.map((v, i) => ({
name:
@ -1945,7 +1980,21 @@ const emptyCreateDialog = ref(false);
foreground: 'var(--blue-6)',
}"
scroll-element="#customer-form-content"
/>
>
<template v-slot:btn-form-branch-customer-branch>
<AddButton
iconOnly
type="button"
@click.stop="customerFormStore.addCurrentCustomerBranch()"
v-if="
customerFormState.branchIndex === -1 &&
!!customerFormState.editCustomerId &&
customerFormState.dialogType !== 'create'
"
:disabled="!customerFormState.readonly"
/>
</template>
</SideMenu>
</div>
</div>
<div
@ -2004,18 +2053,6 @@ const emptyCreateDialog = ref(false);
style="background-color: var(--surface-3)"
/>
<span>{{ $t('customer.form.group.branch') }}</span>
<AddButton
icon-only
type="button"
class="q-ml-sm"
@click="customerFormStore.addCurrentCustomerBranch()"
v-if="
customerFormState.branchIndex === -1 &&
!!customerFormState.editCustomerId &&
customerFormState.dialogType !== 'create'
"
:disabled="!customerFormState.readonly"
/>
</div>
<template
@ -2471,7 +2508,6 @@ const emptyCreateDialog = ref(false);
v-model:provinceId="currentFromDataEmployee.provinceId"
v-model:districtId="currentFromDataEmployee.districtId"
v-model:subDistrictId="currentFromDataEmployee.subDistrictId"
v-model:zipCode="currentFromDataEmployee.zipCode"
employee
dense
class="q-mb-xl"
@ -2935,13 +2971,13 @@ const emptyCreateDialog = ref(false);
() => {
if (customerFormStore.isFormDataDifferent()) {
customerConfirmUnsave();
return false;
return true;
} else {
fetchListCustomer();
customerFormState.branchIndex = -1;
customerFormStore.resetForm(true);
}
return false;
return true;
}
"
>
@ -3011,13 +3047,10 @@ const emptyCreateDialog = ref(false);
name: $t('form.field.basicInformation'),
anchor: 'form-basic-info-customer',
},
{
name: $t('customerBranch.tab.attachment'),
anchor: 'form-upload-file-customer',
},
{
name: $t('customer.form.group.branch'),
anchor: 'form-branch-customer-branch',
useBtn: true,
},
...(customerFormData.customerBranch?.map((v, i) => ({
@ -3037,7 +3070,21 @@ const emptyCreateDialog = ref(false);
foreground: 'var(--blue-6)',
}"
scroll-element="#customer-form-content"
/>
>
<template v-slot:btn-form-branch-customer-branch>
<AddButton
iconOnly
type="button"
@click.stop="customerFormStore.addCurrentCustomerBranch()"
v-if="
customerFormState.branchIndex === -1 &&
!!customerFormState.editCustomerId &&
customerFormState.dialogType !== 'create'
"
:disabled="!customerFormState.readonly"
/>
</template>
</SideMenu>
</div>
</div>
@ -3117,18 +3164,6 @@ const emptyCreateDialog = ref(false);
style="background-color: var(--surface-3)"
/>
<span>{{ $t('customer.form.group.branch') }}</span>
<AddButton
icon-only
type="button"
class="q-ml-sm"
@click="customerFormStore.addCurrentCustomerBranch()"
v-if="
customerFormState.branchIndex === -1 &&
!!customerFormState.editCustomerId &&
customerFormData.status !== 'INACTIVE'
"
:disabled="!customerFormState.readonly"
/>
</div>
<template
@ -3578,7 +3613,6 @@ const emptyCreateDialog = ref(false);
v-model:provinceId="currentFromDataEmployee.provinceId"
v-model:districtId="currentFromDataEmployee.districtId"
v-model:subDistrictId="currentFromDataEmployee.subDistrictId"
v-model:zipCode="currentFromDataEmployee.zipCode"
v-model:sameWithEmployer="
employeeFormState.formDataEmployeeSameAddr
"

22
src/pages/03_customer-management/constant.ts
View file

@ -255,10 +255,10 @@ export const columnsCustomer = [
},
{
name: 'fullname',
name: 'titleName',
align: 'left',
label: 'customer.table.fullname',
field: 'fullname',
label: 'customer.table.titleName',
field: 'titleName',
sortable: true,
},
@ -278,6 +278,22 @@ export const columnsCustomer = [
sortable: true,
},
{
name: 'address',
align: 'center',
label: 'customer.table.address',
field: 'address',
sortable: true,
},
{
name: 'contactName',
align: 'center',
label: 'customer.table.contactName',
field: 'contactName',
sortable: true,
},
{
name: 'officeTel',
align: 'left',