fix: แก้ layout แบ่ง หน้า ของ สินค้า และ บริการ
This commit is contained in:
Net
parent
3f3eee3113
commit
8c5596f5e8
1 changed files with 63 additions and 85 deletions
|
|
@ -202,17 +202,12 @@ const pageSizeGroup = ref<number>(30);
|
|||
const currentPageType = ref<number>(1);
|
||||
const maxPageType = ref<number>(1);
|
||||
const pageSizeType = ref<number>(30);
|
||||
const currentPageServiceAndProduct = ref<number>(1);
|
||||
const maxPageServiceAndProduct = ref<number>(1);
|
||||
const pageSizeServiceAndProduct = ref<number>(30);
|
||||
const currentPageProduct = ref<number>(1);
|
||||
const maxPageProduct = ref<number>(1);
|
||||
const pageSizeProduct = ref<number>(30);
|
||||
const currentPageService = ref<number>(1);
|
||||
const maxPageService = ref<number>(1);
|
||||
const pageSizeService = ref<number>(30);
|
||||
const pageSizeServiceAndProduct = ref<number>(1);
|
||||
const currentPageServiceAndProduct = ref<number>(1);
|
||||
const totalType = ref<number>(0);
|
||||
const totalGroup = ref<number>(0);
|
||||
const total = ref<number>(0);
|
||||
|
||||
// เก็บ id ที่เข้ามา
|
||||
const currentId = ref<string>('');
|
||||
|
|
@ -346,8 +341,8 @@ async function fetchListOfProductIsAdd(productTypeId: string) {
|
|||
|
||||
async function fetchListOfProduct() {
|
||||
const res = await fetchListProduct({
|
||||
page: currentPageProduct.value,
|
||||
pageSize: pageSizeProduct.value,
|
||||
page: currentPageServiceAndProduct.value,
|
||||
pageSize: pageSizeServiceAndProduct.value,
|
||||
query: !!inputSearchProductAndService.value
|
||||
? inputSearchProductAndService.value
|
||||
: undefined,
|
||||
|
|
@ -361,9 +356,12 @@ async function fetchListOfProduct() {
|
|||
});
|
||||
|
||||
if (res) {
|
||||
total.value = res.total;
|
||||
totalProduct.value = res.total;
|
||||
currentPageProduct.value = res.page;
|
||||
maxPageProduct.value = Math.ceil(res.total / pageSizeProduct.value);
|
||||
currentPageServiceAndProduct.value = res.page;
|
||||
maxPageServiceAndProduct.value = Math.ceil(
|
||||
res.total / pageSizeServiceAndProduct.value,
|
||||
);
|
||||
|
||||
product.value = res.result.map((v) => {
|
||||
return {
|
||||
|
|
@ -376,11 +374,11 @@ async function fetchListOfProduct() {
|
|||
|
||||
async function fetchListOfService() {
|
||||
const res = await fetchListService({
|
||||
page: currentPageService.value,
|
||||
page: currentPageServiceAndProduct.value,
|
||||
query: !!inputSearchProductAndService.value
|
||||
? inputSearchProductAndService.value
|
||||
: undefined,
|
||||
pageSize: pageSizeService.value,
|
||||
pageSize: pageSizeServiceAndProduct.value,
|
||||
status:
|
||||
currentStatus.value === 'INACTIVE'
|
||||
? 'INACTIVE'
|
||||
|
|
@ -392,8 +390,11 @@ async function fetchListOfService() {
|
|||
|
||||
if (res) {
|
||||
totalService.value = res.total;
|
||||
currentPageService.value = res.page;
|
||||
maxPageService.value = Math.ceil(res.total / pageSizeService.value);
|
||||
total.value = res.total;
|
||||
currentPageServiceAndProduct.value = res.page;
|
||||
maxPageServiceAndProduct.value = Math.ceil(
|
||||
res.total / pageSizeServiceAndProduct.value,
|
||||
);
|
||||
service.value = res.result.map((v) => {
|
||||
return {
|
||||
...v,
|
||||
|
|
@ -494,6 +495,7 @@ async function fetchListOfProductAndService() {
|
|||
totalProductAndService.value = res.total;
|
||||
}
|
||||
|
||||
total.value = res.total;
|
||||
currentPageServiceAndProduct.value = res.page;
|
||||
maxPageServiceAndProduct.value = Math.ceil(
|
||||
res.total / pageSizeServiceAndProduct.value,
|
||||
|
|
@ -922,6 +924,22 @@ async function fetchStatus() {
|
|||
}
|
||||
}
|
||||
|
||||
async function alternativeFetch() {
|
||||
if (productAndServiceTab.value === 'all') {
|
||||
await fetchListOfProductAndService();
|
||||
flowStore.rotate();
|
||||
}
|
||||
if (productAndServiceTab.value === 'product') {
|
||||
await fetchListOfProduct();
|
||||
|
||||
flowStore.rotate();
|
||||
}
|
||||
if (productAndServiceTab.value === 'service') {
|
||||
await fetchListOfService();
|
||||
flowStore.rotate();
|
||||
}
|
||||
}
|
||||
|
||||
function cloneData() {
|
||||
if (!currentService.value) return;
|
||||
formDataProductService.value = {
|
||||
|
|
@ -964,21 +982,6 @@ watch(currentStatus, async () => {
|
|||
flowStore.rotate();
|
||||
});
|
||||
|
||||
watch(currentPageServiceAndProduct, async () => {
|
||||
await fetchListOfProductAndService();
|
||||
flowStore.rotate();
|
||||
});
|
||||
|
||||
watch(currentPageProduct, async () => {
|
||||
await fetchListOfProduct();
|
||||
flowStore.rotate();
|
||||
});
|
||||
|
||||
watch(currentPageService, async () => {
|
||||
await fetchListOfService();
|
||||
flowStore.rotate();
|
||||
});
|
||||
|
||||
watch(inputSearch, async () => {
|
||||
if (productMode.value === 'group') {
|
||||
await fetchListGroups();
|
||||
|
|
@ -992,19 +995,7 @@ watch(inputSearch, async () => {
|
|||
});
|
||||
|
||||
watch(inputSearchProductAndService, async () => {
|
||||
if (productAndServiceTab.value === 'all') {
|
||||
await fetchListOfProductAndService();
|
||||
flowStore.rotate();
|
||||
}
|
||||
if (productAndServiceTab.value === 'product') {
|
||||
await fetchListOfProduct();
|
||||
|
||||
flowStore.rotate();
|
||||
}
|
||||
if (productAndServiceTab.value === 'service') {
|
||||
await fetchListOfService();
|
||||
flowStore.rotate();
|
||||
}
|
||||
await alternativeFetch();
|
||||
});
|
||||
</script>
|
||||
|
||||
|
|
@ -1287,7 +1278,6 @@ watch(inputSearchProductAndService, async () => {
|
|||
"
|
||||
@on-click="
|
||||
async () => {
|
||||
inputSearch = undefined;
|
||||
pathTypeName = v.name;
|
||||
currentIdType = v.id;
|
||||
productMode = 'service';
|
||||
|
|
@ -1402,7 +1392,7 @@ watch(inputSearchProductAndService, async () => {
|
|||
v-model:max-page="maxPageType"
|
||||
:fetch-data="
|
||||
async () => {
|
||||
await fetchListTypes();
|
||||
await fetchListType();
|
||||
flowStore.rotate();
|
||||
}
|
||||
"
|
||||
|
|
@ -1417,8 +1407,10 @@ watch(inputSearchProductAndService, async () => {
|
|||
name="all"
|
||||
@click="
|
||||
async () => {
|
||||
currentPageServiceAndProduct = 1;
|
||||
inputSearchProductAndService = '';
|
||||
currentStatus = 'All';
|
||||
pageSizeServiceAndProduct;
|
||||
await fetchListOfProductAndService();
|
||||
flowStore.rotate();
|
||||
}
|
||||
|
|
@ -1449,6 +1441,7 @@ watch(inputSearchProductAndService, async () => {
|
|||
name="product"
|
||||
@click="
|
||||
async () => {
|
||||
currentPageServiceAndProduct = 1;
|
||||
inputSearchProductAndService = '';
|
||||
currentStatus = 'All';
|
||||
await fetchListOfProduct();
|
||||
|
|
@ -1481,6 +1474,7 @@ watch(inputSearchProductAndService, async () => {
|
|||
name="service"
|
||||
@click="
|
||||
async () => {
|
||||
currentPageServiceAndProduct = 1;
|
||||
inputSearchProductAndService = '';
|
||||
currentStatus = 'All';
|
||||
await fetchListOfService();
|
||||
|
|
@ -1655,45 +1649,29 @@ watch(inputSearchProductAndService, async () => {
|
|||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
v-if="productAndServiceTab === 'all' && productAndService.length > 0"
|
||||
class="row justify-center q-pb-md"
|
||||
>
|
||||
<q-pagination
|
||||
claess="pagination"
|
||||
v-model="currentPageServiceAndProduct"
|
||||
:max="maxPageServiceAndProduct"
|
||||
direction-links
|
||||
active-color="primary"
|
||||
gutter="sm"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div
|
||||
v-if="productAndServiceTab === 'product'"
|
||||
class="row justify-center q-pb-md"
|
||||
>
|
||||
<q-pagination
|
||||
claess="pagination"
|
||||
v-model="currentPageProduct"
|
||||
:max="maxPageProduct"
|
||||
direction-links
|
||||
active-color="primary"
|
||||
gutter="sm"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div
|
||||
v-if="productAndServiceTab === 'service'"
|
||||
class="row justify-center q-pb-md"
|
||||
>
|
||||
<q-pagination
|
||||
claess="pagination"
|
||||
v-model="currentPageService"
|
||||
:max="maxPageService"
|
||||
direction-links
|
||||
active-color="primary"
|
||||
gutter="sm"
|
||||
<div class="row justify-between q-pb-md q-px-lg">
|
||||
<div class="app-text-muted">
|
||||
{{
|
||||
$t('recordsPage', {
|
||||
resultcurrentPage:
|
||||
productAndServiceTab === 'all'
|
||||
? productAndService.length
|
||||
: productAndServiceTab === 'product'
|
||||
? product?.length
|
||||
: service?.length,
|
||||
total: total,
|
||||
})
|
||||
}}
|
||||
</div>
|
||||
<PaginationComponent
|
||||
v-model:current-page="currentPageServiceAndProduct"
|
||||
v-model:max-page="maxPageServiceAndProduct"
|
||||
:fetch-data="
|
||||
async () => {
|
||||
await alternativeFetch();
|
||||
flowStore.rotate();
|
||||
}
|
||||
"
|
||||
/>
|
||||
</div>
|
||||
</AppBox>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue