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

fix: แก้ layout แบ่ง หน้า ของ สินค้า และ บริการ

Browse source
This commit is contained in:
Net 2024-07-01 14:20:24 +07:00
parent 3f3eee3113
commit 8c5596f5e8
1 changed files with 63 additions and 85 deletions
Download patch file Download diff file Expand all files Collapse all files

148
src/pages/04_product-service/MainPage.vue
View file

@ -202,17 +202,12 @@ const pageSizeGroup = ref<number>(30);
const currentPageType = ref<number>(1); const currentPageType = ref<number>(1);
const maxPageType = ref<number>(1); const maxPageType = ref<number>(1);
const pageSizeType = ref<number>(30); const pageSizeType = ref<number>(30);
const currentPageServiceAndProduct = ref<number>(1);
const maxPageServiceAndProduct = ref<number>(1); const maxPageServiceAndProduct = ref<number>(1);
const pageSizeServiceAndProduct = ref<number>(30); const pageSizeServiceAndProduct = ref<number>(1);
const currentPageProduct = ref<number>(1); const currentPageServiceAndProduct = 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 totalType = ref<number>(0); const totalType = ref<number>(0);
const totalGroup = ref<number>(0); const totalGroup = ref<number>(0);
const total = ref<number>(0);
// เก็บ id ที่เข้ามา // เก็บ id ที่เข้ามา
const currentId = ref<string>(''); const currentId = ref<string>('');
@ -346,8 +341,8 @@ async function fetchListOfProductIsAdd(productTypeId: string) {
async function fetchListOfProduct() { async function fetchListOfProduct() {
const res = await fetchListProduct({ const res = await fetchListProduct({
page: currentPageProduct.value, page: currentPageServiceAndProduct.value,
pageSize: pageSizeProduct.value, pageSize: pageSizeServiceAndProduct.value,
query: !!inputSearchProductAndService.value query: !!inputSearchProductAndService.value
? inputSearchProductAndService.value ? inputSearchProductAndService.value
: undefined, : undefined,
@ -361,9 +356,12 @@ async function fetchListOfProduct() {
}); });
if (res) { if (res) {
total.value = res.total;
totalProduct.value = res.total; totalProduct.value = res.total;
currentPageProduct.value = res.page; currentPageServiceAndProduct.value = res.page;
maxPageProduct.value = Math.ceil(res.total / pageSizeProduct.value); maxPageServiceAndProduct.value = Math.ceil(
res.total / pageSizeServiceAndProduct.value,
);
product.value = res.result.map((v) => { product.value = res.result.map((v) => {
return { return {
@ -376,11 +374,11 @@ async function fetchListOfProduct() {
async function fetchListOfService() { async function fetchListOfService() {
const res = await fetchListService({ const res = await fetchListService({
page: currentPageService.value, page: currentPageServiceAndProduct.value,
query: !!inputSearchProductAndService.value query: !!inputSearchProductAndService.value
? inputSearchProductAndService.value ? inputSearchProductAndService.value
: undefined, : undefined,
pageSize: pageSizeService.value, pageSize: pageSizeServiceAndProduct.value,
status: status:
currentStatus.value === 'INACTIVE' currentStatus.value === 'INACTIVE'
? 'INACTIVE' ? 'INACTIVE'
@ -392,8 +390,11 @@ async function fetchListOfService() {
if (res) { if (res) {
totalService.value = res.total; totalService.value = res.total;
currentPageService.value = res.page; total.value = res.total;
maxPageService.value = Math.ceil(res.total / pageSizeService.value); currentPageServiceAndProduct.value = res.page;
maxPageServiceAndProduct.value = Math.ceil(
res.total / pageSizeServiceAndProduct.value,
);
service.value = res.result.map((v) => { service.value = res.result.map((v) => {
return { return {
...v, ...v,
@ -494,6 +495,7 @@ async function fetchListOfProductAndService() {
totalProductAndService.value = res.total; totalProductAndService.value = res.total;
} }
total.value = res.total;
currentPageServiceAndProduct.value = res.page; currentPageServiceAndProduct.value = res.page;
maxPageServiceAndProduct.value = Math.ceil( maxPageServiceAndProduct.value = Math.ceil(
res.total / pageSizeServiceAndProduct.value, 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() { function cloneData() {
if (!currentService.value) return; if (!currentService.value) return;
formDataProductService.value = { formDataProductService.value = {
@ -964,21 +982,6 @@ watch(currentStatus, async () => {
flowStore.rotate(); 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 () => { watch(inputSearch, async () => {
if (productMode.value === 'group') { if (productMode.value === 'group') {
await fetchListGroups(); await fetchListGroups();
@ -992,19 +995,7 @@ watch(inputSearch, async () => {
}); });
watch(inputSearchProductAndService, async () => { watch(inputSearchProductAndService, async () => {
if (productAndServiceTab.value === 'all') { await alternativeFetch();
await fetchListOfProductAndService();
flowStore.rotate();
}
if (productAndServiceTab.value === 'product') {
await fetchListOfProduct();
flowStore.rotate();
}
if (productAndServiceTab.value === 'service') {
await fetchListOfService();
flowStore.rotate();
}
}); });
</script> </script>
@ -1287,7 +1278,6 @@ watch(inputSearchProductAndService, async () => {
" "
@on-click=" @on-click="
async () => { async () => {
inputSearch = undefined;
pathTypeName = v.name; pathTypeName = v.name;
currentIdType = v.id; currentIdType = v.id;
productMode = 'service'; productMode = 'service';
@ -1402,7 +1392,7 @@ watch(inputSearchProductAndService, async () => {
v-model:max-page="maxPageType" v-model:max-page="maxPageType"
:fetch-data=" :fetch-data="
async () => { async () => {
await fetchListTypes(); await fetchListType();
flowStore.rotate(); flowStore.rotate();
} }
" "
@ -1417,8 +1407,10 @@ watch(inputSearchProductAndService, async () => {
name="all" name="all"
@click=" @click="
async () => { async () => {
currentPageServiceAndProduct = 1;
inputSearchProductAndService = ''; inputSearchProductAndService = '';
currentStatus = 'All'; currentStatus = 'All';
pageSizeServiceAndProduct;
await fetchListOfProductAndService(); await fetchListOfProductAndService();
flowStore.rotate(); flowStore.rotate();
} }
@ -1449,6 +1441,7 @@ watch(inputSearchProductAndService, async () => {
name="product" name="product"
@click=" @click="
async () => { async () => {
currentPageServiceAndProduct = 1;
inputSearchProductAndService = ''; inputSearchProductAndService = '';
currentStatus = 'All'; currentStatus = 'All';
await fetchListOfProduct(); await fetchListOfProduct();
@ -1481,6 +1474,7 @@ watch(inputSearchProductAndService, async () => {
name="service" name="service"
@click=" @click="
async () => { async () => {
currentPageServiceAndProduct = 1;
inputSearchProductAndService = ''; inputSearchProductAndService = '';
currentStatus = 'All'; currentStatus = 'All';
await fetchListOfService(); await fetchListOfService();
@ -1655,45 +1649,29 @@ watch(inputSearchProductAndService, async () => {
/> />
</div> </div>
</div> </div>
<div <div class="row justify-between q-pb-md q-px-lg">
v-if="productAndServiceTab === 'all' && productAndService.length > 0" <div class="app-text-muted">
class="row justify-center q-pb-md" {{
> $t('recordsPage', {
<q-pagination resultcurrentPage:
claess="pagination" productAndServiceTab === 'all'
v-model="currentPageServiceAndProduct" ? productAndService.length
:max="maxPageServiceAndProduct" : productAndServiceTab === 'product'
direction-links ? product?.length
active-color="primary" : service?.length,
gutter="sm" total: total,
/> })
</div> }}
</div>
<div <PaginationComponent
v-if="productAndServiceTab === 'product'" v-model:current-page="currentPageServiceAndProduct"
class="row justify-center q-pb-md" v-model:max-page="maxPageServiceAndProduct"
> :fetch-data="
<q-pagination async () => {
claess="pagination" await alternativeFetch();
v-model="currentPageProduct" flowStore.rotate();
: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> </div>
</AppBox> </AppBox>