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

refactor: 04 => enhance fetchWorkflowList for mobile responsiveness and optimize data handling

Browse source
This commit is contained in:
puriphatt 2025-01-30 17:33:53 +07:00
parent 84282ff5ce
commit a61d2225f9
1 changed files with 42 additions and 26 deletions
Download patch file Download diff file Expand all files Collapse all files

68
src/pages/04_flow-managment/MainPage.vue
View file

@ -205,7 +205,7 @@ async function submit() {
...formDataWorkflow.value,
});
}
await fetchWorkflowList();
await fetchWorkflowList($q.screen.xs);
resetForm();
}
@ -262,28 +262,28 @@ function resetForm() {
};
}
async function fetchWorkflowList() {
{
const res = await workflowStore.getWorkflowTemplateList({
page: workflowPage.value,
pageSize: workflowPageSize.value,
query: pageState.inputSearch,
status:
statusFilter.value === 'all'
? undefined
: statusFilter.value === 'statusACTIVE'
? 'ACTIVE'
: 'INACTIVE',
});
if (res) {
$q.screen.xs
? workflowData.value.push(...res.result)
: (workflowData.value = res.result);
async function fetchWorkflowList(mobileFetch?: boolean) {
console.log(workflowData.value.length);
const res = await workflowStore.getWorkflowTemplateList({
page: mobileFetch ? 1 : workflowPage.value,
pageSize: mobileFetch ? workflowData.value.length : workflowPageSize.value,
query: pageState.inputSearch,
status:
statusFilter.value === 'all'
? undefined
: statusFilter.value === 'statusACTIVE'
? 'ACTIVE'
: 'INACTIVE',
});
if (res) {
workflowData.value =
$q.screen.xs && !mobileFetch
? [...workflowData.value, ...res.result]
: res.result;
workflowPageMax.value = Math.ceil(res.total / workflowPageSize.value);
if (pageState.inputSearch || statusFilter.value !== 'all') return;
pageState.total = res.total;
}
workflowPageMax.value = Math.ceil(res.total / workflowPageSize.value);
if (pageState.inputSearch || statusFilter.value !== 'all') return;
pageState.total = res.total;
}
}
@ -295,8 +295,19 @@ onMounted(async () => {
await fetchWorkflowList();
});
watch(statusFilter, fetchWorkflowList);
watch([() => pageState.inputSearch, workflowPageSize], fetchWorkflowList);
watch(
() => statusFilter.value,
() => {
workflowData.value = [];
workflowPage.value = 1;
fetchWorkflowList();
},
);
watch([() => pageState.inputSearch, workflowPageSize], () => {
workflowData.value = [];
workflowPage.value = 1;
fetchWorkflowList();
});
</script>
<template>
<FloatingActionButton
@ -573,8 +584,13 @@ watch([() => pageState.inputSearch, workflowPageSize], fetchWorkflowList);
v-if="fieldSelected.includes('order')"
class="text-center"
>
{{ props.rowIndex + 1 }}
<!-- {{ (currentPage - 1) * pageSize + props.rowIndex + 1 }} -->
{{
$q.screen.xs
? props.rowIndex + 1
: (workflowPage - 1) * workflowPageSize +
props.rowIndex +
1
}}
</q-td>
<q-td v-if="fieldSelected.includes('name')">
<section class="row items-center no-wrap">