fix: 04-product service layout

This commit is contained in:
puriphatt 2024-07-02 09:58:59 +00:00
parent 56640e90f9
commit 6265cb1a37

View file

@ -29,7 +29,7 @@ import PaginationComponent from 'src/components/PaginationComponent.vue';
import useFlowStore from 'src/stores/flow'; import useFlowStore from 'src/stores/flow';
import { Status } from 'src/stores/types'; import { Status } from 'src/stores/types';
import { dialog, dialogWarningClose } from 'src/stores/utils'; import useUtilsStore, { dialog, dialogWarningClose } from 'src/stores/utils';
import useProductServiceStore from 'src/stores/product-service'; import useProductServiceStore from 'src/stores/product-service';
import { import {
@ -46,6 +46,7 @@ import {
} from 'src/stores/product-service/types'; } from 'src/stores/product-service/types';
const flowStore = useFlowStore(); const flowStore = useFlowStore();
const utilsStore = useUtilsStore();
const productServiceStore = useProductServiceStore(); const productServiceStore = useProductServiceStore();
const optionStore = useOptionStore(); const optionStore = useOptionStore();
@ -971,6 +972,9 @@ function cloneData() {
} }
onMounted(async () => { onMounted(async () => {
utilsStore.currentTitle.title = 'mainProductTitle';
utilsStore.currentTitle.caption = 'mainProductCaption';
calculateStats(); calculateStats();
await fetchListGroups(); await fetchListGroups();
flowStore.rotate(); flowStore.rotate();
@ -1075,17 +1079,12 @@ watch(inputSearchProductAndService, async () => {
></q-fab-action> ></q-fab-action>
</ButtonAddComponent> </ButtonAddComponent>
<div class="column q-pb-lg"> <div class="column full-height no-wrap">
<div class="row text-h6 text-weight-bold q-mb-md">
{{ $t('productAndService') }}
</div>
<AppBox <AppBox
v-if="stat[0].count === 0" v-if="stat[0].count === 0"
class="column" class="column"
:no-padding="productGroup?.length !== 0" :no-padding="productGroup?.length !== 0"
bordered bordered
style="min-height: 70vh"
> >
<TooltipComponent <TooltipComponent
class="self-end" class="self-end"
@ -1102,7 +1101,7 @@ watch(inputSearchProductAndService, async () => {
</div> </div>
</AppBox> </AppBox>
<div v-if="stat[0].count !== 0"> <div v-if="stat[0].count !== 0" class="column full-height no-wrap">
<div <div
class="row items-center q-mb-md" class="row items-center q-mb-md"
v-if="productMode === 'service' || productMode === 'type'" v-if="productMode === 'service' || productMode === 'type'"
@ -1150,10 +1149,9 @@ watch(inputSearchProductAndService, async () => {
> >
<StatCard label-i18n :branch="stat" :dark="$q.dark.isActive" /> <StatCard label-i18n :branch="stat" :dark="$q.dark.isActive" />
</AppBox> </AppBox>
<AppBox <div
v-if="productMode === 'group' || productMode === 'type'" v-if="productMode === 'group' || productMode === 'type'"
bordered class="surface-1 col bordered rounded q-pa-md scroll"
style="min-height: 80vh"
> >
<div class="row justify-between"> <div class="row justify-between">
<div <div
@ -1408,8 +1406,11 @@ watch(inputSearchProductAndService, async () => {
/> />
</div> </div>
</template> </template>
</AppBox> </div>
<AppBox bordered v-else-if="productMode === 'service'" no-padding> <div
v-else-if="productMode === 'service'"
class="surface-1 col bordered rounded scroll"
>
<div class="row justify-between q-px-md"> <div class="row justify-between q-px-md">
<q-tabs v-model="productAndServiceTab" dense> <q-tabs v-model="productAndServiceTab" dense>
<q-tab <q-tab
@ -1683,7 +1684,7 @@ watch(inputSearchProductAndService, async () => {
" "
/> />
</div> </div>
</AppBox> </div>
</div> </div>
</div> </div>