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

refactor: ปรับ ui เปลี่ยนหน้า

Browse source
This commit is contained in:
Net 2024-07-04 14:46:10 +07:00
parent 1d79d9e911
commit 979abe0bbb
1 changed files with 46 additions and 13 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -1601,7 +1601,9 @@ watch([inputSearch, currentStatus], async () => {
> >
<div class="col-4"> <div class="col-4">
<div class="row items-center"> <div class="row items-center">
<div style="width: 80px">{{ $t('showing') }}</div> <div class="app-text-muted" style="width: 80px">
{{ $t('showing') }}
</div>
<div> <div>
<q-btn-dropdown dense unelevated :label="pageSize"> <q-btn-dropdown dense unelevated :label="pageSize">
<q-list> <q-list>
@ -1696,8 +1698,37 @@ watch([inputSearch, currentStatus], async () => {
@toggle-status="(id, status) => toggleStatusEmployee(id, status)" @toggle-status="(id, status) => toggleStatusEmployee(id, status)"
/> />
<div class="row justify-between q-pt-md"> <div class="col-4 row justify-center">
<div class="app-text-muted"> <div class="col-4">
<div class="row items-center">
<div class="app-text-muted" style="width: 80px">
{{ $t('showing') }}
</div>
<div>
<q-btn-dropdown dense unelevated :label="pageSize">
<q-list>
<q-item
v-for="v in [10, 30, 50, 100, 500, 1000]"
clickable
v-close-popup
@click="
async () => {
pageSize = v;
await fetchListEmployee();
}
"
>
<q-item-section>
<q-item-label>{{ v }}</q-item-label>
</q-item-section>
</q-item>
</q-list>
</q-btn-dropdown>
</div>
</div>
</div>
<div class="col-4 row justify-center app-text-muted">
{{ {{
$t('recordsPage', { $t('recordsPage', {
resultcurrentPage: listEmployee.length, resultcurrentPage: listEmployee.length,
@ -1705,16 +1736,18 @@ watch([inputSearch, currentStatus], async () => {
}) })
}} }}
</div> </div>
<PaginationComponent <div class="col-4 row justify-end">
v-model:current-page="currentPageEmployee" <PaginationComponent
v-model:max-page="maxPageEmployee" v-model:current-page="currentPageEmployee"
:fetch-data=" v-model:max-page="maxPageEmployee"
async () => { :fetch-data="
await fetchListEmployee(); async () => {
flowStore.rotate(); await fetchListEmployee();
} flowStore.rotate();
" }
/> "
/>
</div>
</div> </div>
</div> </div>
</template> </template>