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

fix: change style on customer dialog

Browse source
This commit is contained in:
oat_dev 2024-06-06 16:03:47 +07:00
parent fa5290dfcf
commit 5c9c647a2c
3 changed files with 62 additions and 47 deletions
Download patch file Download diff file Expand all files Collapse all files

63
src/components/03_customer-management/AboutComponent.vue
View file

@ -22,38 +22,37 @@ const registerDate = defineModel<Date | null>('registerDate');
<div class="row"> <div class="row">
<div class="col-3 app-text-muted">• {{ $t(`about`) }}</div> <div class="col-3 app-text-muted">• {{ $t(`about`) }}</div>
<div class="col-9 row q-col-gutter-md"> <div class="col-9 row q-col-gutter-md">
<div class="row q-col-gutter-md"> <q-input
<q-input :dense="dense"
:dense="dense" :outlined="!readonly"
:outlined="!readonly" :readonly="readonly"
:readonly="readonly" :borderless="readonly"
:borderless="readonly" hide-bottom-space
hide-bottom-space class="col-3"
class="col-3" :label="$t('branchCode')"
:label="$t('branchCode')" v-model="branchCode"
v-model="branchCode" />
/> <q-input
<q-input :dense="dense"
:dense="dense" :outlined="!readonly"
:outlined="!readonly" :readonly="readonly"
:readonly="readonly" :borderless="readonly"
:borderless="readonly" hide-bottom-space
hide-bottom-space class="col-4"
class="col-4" :label="$t('legalEntityCode')"
:label="$t('legalEntityCode')" v-model="legalEntityCode"
v-model="legalEntityCode" />
/> <q-input
<q-input :dense="dense"
:dense="dense" :outlined="!readonly"
:outlined="!readonly" :readonly="readonly"
:readonly="readonly" :borderless="readonly"
:borderless="readonly" hide-bottom-space
hide-bottom-space class="col-5"
class="col-5" :label="$t('taxNo')"
:label="$t('taxNo')" v-model="taxNo"
v-model="taxNo" />
/>
</div>
<q-input <q-input
:dense="dense" :dense="dense"
:outlined="!readonly" :outlined="!readonly"

41
src/components/TabComponent.vue
View file

@ -37,40 +37,49 @@ function addData() {
} }
function close(index: number) { function close(index: number) {
if (customerBranch.value.length === 1) return; if (customerBranch.value.length < 2) return;
if (customerBranch.value.length === index + 1) { if (
customerBranch.value.length === index + 1 &&
tab.value + 1 === customerBranch.value.length
) {
tab.value = tab.value - 1; tab.value = tab.value - 1;
} else if (tab.value >= index) { } else if (tab.value >= index) {
tab.value = tab.value - 1; if (tab.value !== 0) {
} tab.value = tab.value - 1;
}
if (customerBranch.value.length > 1) {
customerBranch.value.splice(index, 1);
} }
customerBranch.value.splice(index, 1);
} }
</script> </script>
<template> <template>
<div class="column"> <div class="row no-wrap">
<q-btn
class="q-px-lg tab-style app-text-muted"
flat
style="background-color: var(--_body-bg)"
@click="addData()"
icon="mdi-plus"
></q-btn>
<q-tabs <q-tabs
active-bg-color="white" active-bg-color="white"
active-color="primary" active-color="primary"
indicator-color="white" indicator-color="transparent"
active-class="active-tab" active-class="active-tab"
v-model="tab" v-model="tab"
align="left" align="left"
inline-label inline-label
class="text-grey" class="text-grey"
style="width: 960px; background-color: var(--_body-bg)" style="background-color: var(--_body-bg); max-width: 55vw"
> >
<q-tab icon="mdi-plus" @click="addData()" />
<q-tab <q-tab
v-for="(v, index) in customerBranch" v-for="(v, index) in customerBranch"
:key="index" :key="index"
:name="index" :name="index"
:label="`${$t('customerBranchFormTab')} ${index + 1}`" :label="`${$t('customerBranchFormTab')} ${index + 1}`"
@click="(tab = index), console.log(customerBranch)" @click="tab = index"
no-caps no-caps
:class="tab === index ? '' : 'tab-style'"
> >
<q-btn <q-btn
round round
@ -107,5 +116,13 @@ function close(index: number) {
.active-tab { .active-tab {
border: 1px solid #e0dcdc; border: 1px solid #e0dcdc;
border-bottom: none; border-bottom: none;
border-top: none;
border-left: none;
}
.tab-style {
border: 1px solid #e0dcdc;
border-left: none;
border-top: none;
} }
</style> </style>

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

@ -326,9 +326,7 @@ function onClose() {
• {{ $t('formDialogCustomerBranch') }} • {{ $t('formDialogCustomerBranch') }}
</div> </div>
<div <div class="col-12 row bordered q-pt-none rounded">
class="col-12 full-width row bordered-b bordered-l bordered-r rounded"
>
<TabComponent <TabComponent
v-model:customer-branch="formData.customerBranch" v-model:customer-branch="formData.customerBranch"
v-model:tab-index="indexTab" v-model:tab-index="indexTab"
@ -382,6 +380,7 @@ function onClose() {
" "
dense dense
outlined outlined
bordered
separator separator
/> />
</template> </template>