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

fix: customer & sub side menu

Browse source
This commit is contained in:
puriphatt 2024-09-19 13:30:20 +07:00
parent 88009da52f
commit cfbc1866f7
2 changed files with 120 additions and 55 deletions
Download patch file Download diff file Expand all files Collapse all files

30
src/components/SideMenu.vue
View file

@ -94,7 +94,19 @@ onUnmounted(() => {
}" }"
@click="handleClick(v)" @click="handleClick(v)"
> >
{{ v.name }} <span
class="row no-wrap items-center"
:class="{ 'app-text-muted': v.sub && activeMenu !== v.anchor }"
>
<div v-if="v.sub" class="circle-2"></div>
<div
v-if="v.sub"
class="surface-tab circle flex justify-center q-mx-md"
>
{{ menu.filter((v) => v.sub === true).indexOf(v) + 1 }}
</div>
{{ v.name }}
</span>
<slot v-if="v.useBtn" :name="`btn-${v.anchor}`"></slot> <slot v-if="v.useBtn" :name="`btn-${v.anchor}`"></slot>
</span> </span>
</template> </template>
@ -117,7 +129,7 @@ onUnmounted(() => {
cursor: pointer; cursor: pointer;
&.side-menu__sub { &.side-menu__sub {
margin-left: 1rem; /* margin-left: 1rem; */
} }
&.side-menu__active { &.side-menu__active {
@ -127,4 +139,18 @@ onUnmounted(() => {
} }
} }
} }
.circle {
width: 15px;
height: 15px;
font-size: 12px;
border-radius: 50%;
}
.circle-2 {
background: var(--surface-tab);
width: 7px;
height: 7px;
border-radius: 50%;
}
</style> </style>

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

@ -916,7 +916,16 @@ const emptyCreateDialog = ref(false);
class="q-ml-sm col" class="q-ml-sm col"
:options=" :options="
currentTab === 'employer' currentTab === 'employer'
? fieldDisplayCustomer ? gridView
? fieldDisplayCustomer.filter((v) => {
return (
v.value !== 'orderNumber' &&
v.value !== 'titleName' &&
v.value !== 'address' &&
v.value !== 'contactName'
);
})
: fieldDisplayCustomer
: fieldDisplayEmployee : fieldDisplayEmployee
" "
:display-value="$t('general.displayField')" :display-value="$t('general.displayField')"
@ -1178,7 +1187,10 @@ const emptyCreateDialog = ref(false);
}} }}
</q-td> </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="row items-center">
<div <div
class="q-mr-sm" class="q-mr-sm"
@ -1233,6 +1245,7 @@ const emptyCreateDialog = ref(false);
</div> </div>
</div> </div>
</q-td> </q-td>
<q-td v-if="fieldSelected.includes('businessTypePure')"> <q-td v-if="fieldSelected.includes('businessTypePure')">
{{ {{
props.row.branch.length !== 0 props.row.branch.length !== 0
@ -1257,16 +1270,22 @@ const emptyCreateDialog = ref(false);
}} }}
</q-td> </q-td>
<q-td v-if="fieldSelected.includes('officeTel')"> <q-td v-if="fieldSelected.includes('address')">
{{ {{
props.row.branch.length !== 0 locale === 'eng'
? props.row.branch[0].officeTel !== null ? `${props.row.branch[0].addressEN} ${props.row.branch[0].mooEN} ${props.row.branch[0].soiEN} ${props.row.branch[0].streetEN} ${props.row.branch[0].subDistrict.nameEN} ${props.row.branch[0].district.nameEN} ${props.row.branch[0].province.nameEN} ${props.row.branch[0].subDistrict.zipCode}`
? props.row.branch[0].officeTel : `${props.row.branch[0].address} ${props.row.branch[0].moo} ${props.row.branch[0].soi} ${props.row.branch[0].street} ต.${props.row.branch[0].subDistrict.name} อ.${props.row.branch[0].district.name} จ.${props.row.branch[0].province.name} ${props.row.branch[0].subDistrict.zipCode}`
: ''
: '-'
}} }}
</q-td> </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-td>
<q-btn <q-btn
dense dense
@ -1425,12 +1444,7 @@ const emptyCreateDialog = ref(false);
: props.row.branch[0]?.firstName + : props.row.branch[0]?.firstName +
' ' + ' ' +
props.row.branch[0]?.lastName || '-', 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'" :inactive="props.row.status === 'INACTIVE'"
:field-selected=" :field-selected="
fieldSelected.filter((v) => { fieldSelected.filter((v) => {
@ -1454,8 +1468,8 @@ const emptyCreateDialog = ref(false);
class="absolute-bottom-right no-padding" class="absolute-bottom-right no-padding"
style=" style="
border-radius: 50%; border-radius: 50%;
min-width: 11.31px; min-width: 10px;
min-height: 11.31px; min-height: 10px;
" "
:style="{ :style="{
background: `var(--${props.row.status === 'INACTIVE' ? 'stone-5' : 'green-6'})`, background: `var(--${props.row.status === 'INACTIVE' ? 'stone-5' : 'green-6'})`,
@ -1471,6 +1485,22 @@ const emptyCreateDialog = ref(false);
padding-block: var(--size-2); 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 <div
class="col-12 q-py-sm row" class="col-12 q-py-sm row"
v-for="key in fieldSelected v-for="key in fieldSelected
@ -1481,7 +1511,10 @@ const emptyCreateDialog = ref(false);
}) })
.filter((v) => { .filter((v) => {
return ( return (
v !== 'orderNumber' && v !== 'fullname' v !== 'orderNumber' &&
v !== 'titleName' &&
v !== 'address' &&
v !== 'contactName'
); );
})" })"
:key="key" :key="key"
@ -1500,7 +1533,7 @@ const emptyCreateDialog = ref(false);
props.row.branch[0].jobPosition, props.row.branch[0].jobPosition,
) )
: key === 'officeTel' : key === 'officeTel'
? props.row.branch[0].officeTel ? props.row.branch[0].officeTel || '-'
: '' : ''
}} }}
</span> </span>
@ -1929,6 +1962,7 @@ const emptyCreateDialog = ref(false);
{ {
name: $t('customer.form.group.branch'), name: $t('customer.form.group.branch'),
anchor: 'form-branch-customer-branch', anchor: 'form-branch-customer-branch',
useBtn: true,
}, },
...(customerFormData.customerBranch?.map((v, i) => ({ ...(customerFormData.customerBranch?.map((v, i) => ({
name: name:
@ -1947,7 +1981,26 @@ const emptyCreateDialog = ref(false);
foreground: 'var(--blue-6)', foreground: 'var(--blue-6)',
}" }"
scroll-element="#customer-form-content" scroll-element="#customer-form-content"
/> >
<template v-slot:btn-form-branch-customer-branch>
<q-btn
dense
flat
icon="mdi-plus"
size="sm"
rounded
padding="0px 0px"
class="app-text-muted"
@click.stop="customerFormStore.addCurrentCustomerBranch()"
v-if="
customerFormState.branchIndex === -1 &&
!!customerFormState.editCustomerId &&
customerFormState.dialogType !== 'create'
"
:disabled="!customerFormState.readonly"
/>
</template>
</SideMenu>
</div> </div>
</div> </div>
<div <div
@ -2006,18 +2059,6 @@ const emptyCreateDialog = ref(false);
style="background-color: var(--surface-3)" style="background-color: var(--surface-3)"
/> />
<span>{{ $t('customer.form.group.branch') }}</span> <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> </div>
<template <template
@ -2473,7 +2514,6 @@ const emptyCreateDialog = ref(false);
v-model:provinceId="currentFromDataEmployee.provinceId" v-model:provinceId="currentFromDataEmployee.provinceId"
v-model:districtId="currentFromDataEmployee.districtId" v-model:districtId="currentFromDataEmployee.districtId"
v-model:subDistrictId="currentFromDataEmployee.subDistrictId" v-model:subDistrictId="currentFromDataEmployee.subDistrictId"
v-model:zipCode="currentFromDataEmployee.zipCode"
employee employee
dense dense
class="q-mb-xl" class="q-mb-xl"
@ -3103,13 +3143,10 @@ const emptyCreateDialog = ref(false);
name: $t('form.field.basicInformation'), name: $t('form.field.basicInformation'),
anchor: 'form-basic-info-customer', anchor: 'form-basic-info-customer',
}, },
{
name: $t('customerBranch.tab.attachment'),
anchor: 'form-upload-file-customer',
},
{ {
name: $t('customer.form.group.branch'), name: $t('customer.form.group.branch'),
anchor: 'form-branch-customer-branch', anchor: 'form-branch-customer-branch',
useBtn: true,
}, },
...(customerFormData.customerBranch?.map((v, i) => ({ ...(customerFormData.customerBranch?.map((v, i) => ({
@ -3129,7 +3166,26 @@ const emptyCreateDialog = ref(false);
foreground: 'var(--blue-6)', foreground: 'var(--blue-6)',
}" }"
scroll-element="#customer-form-content" scroll-element="#customer-form-content"
/> >
<template v-slot:btn-form-branch-customer-branch>
<q-btn
dense
flat
icon="mdi-plus"
size="sm"
rounded
padding="0px 0px"
class="app-text-muted"
@click.stop="customerFormStore.addCurrentCustomerBranch()"
v-if="
customerFormState.branchIndex === -1 &&
!!customerFormState.editCustomerId &&
customerFormState.dialogType !== 'create'
"
:disabled="!customerFormState.readonly"
/>
</template>
</SideMenu>
</div> </div>
</div> </div>
@ -3209,18 +3265,6 @@ const emptyCreateDialog = ref(false);
style="background-color: var(--surface-3)" style="background-color: var(--surface-3)"
/> />
<span>{{ $t('customer.form.group.branch') }}</span> <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> </div>
<template <template
@ -3253,10 +3297,6 @@ const emptyCreateDialog = ref(false);
'legalPersonNo', 'legalPersonNo',
'registerName', 'registerName',
'registerNameEN', 'registerNameEN',
'registerDate',
'authorizedCapital',
'authorizedName',
'authorizedNameEN',
'customerName', 'customerName',
]; ];
} }
@ -3670,7 +3710,6 @@ const emptyCreateDialog = ref(false);
v-model:provinceId="currentFromDataEmployee.provinceId" v-model:provinceId="currentFromDataEmployee.provinceId"
v-model:districtId="currentFromDataEmployee.districtId" v-model:districtId="currentFromDataEmployee.districtId"
v-model:subDistrictId="currentFromDataEmployee.subDistrictId" v-model:subDistrictId="currentFromDataEmployee.subDistrictId"
v-model:zipCode="currentFromDataEmployee.zipCode"
v-model:sameWithEmployer=" v-model:sameWithEmployer="
employeeFormState.formDataEmployeeSameAddr employeeFormState.formDataEmployeeSameAddr
" "