code refactor

This commit is contained in:
MaysWind
2025-02-09 21:52:48 +08:00
parent a21bc7aad7
commit fa77d3e837
2 changed files with 93 additions and 64 deletions
@@ -0,0 +1,88 @@
<template>
<v-pagination :density="density"
:disabled="disabled"
:total-visible="totalVisible ?? 7"
:length="totalPageCount"
v-model="currentPage">
<template #item="{ page, isActive }">
<v-btn variant="text"
:density="density"
:disabled="disabled"
:icon="true"
:color="isActive ? 'primary' : 'default'"
@click="currentPage = parseInt(page)"
v-if="page !== '...'"
>
<span>{{ page }}</span>
</v-btn>
<v-btn variant="text"
color="default"
:density="density"
:disabled="disabled"
:icon="true"
v-if="page === '...'"
>
<span>{{ page }}</span>
<v-menu :disabled="disabled" :close-on-content-click="false" activator="parent">
<v-list>
<v-list-item class="text-sm" :density="density">
<v-list-item-title class="cursor-pointer">
<v-autocomplete width="100"
item-title="page"
item-value="page"
:density="density"
:items="allPages"
:no-data-text="tt('No results')"
v-model="currentPage"
/>
</v-list-item-title>
</v-list-item>
</v-list>
</v-menu>
</v-btn>
</template>
</v-pagination>
</template>
<script setup lang="ts">
import { computed } from 'vue';
import { useI18n } from '@/locales/helpers.ts';
import type { ComponentDensity } from '@/lib/ui/desktop.ts';
const props = defineProps<{
density?: ComponentDensity;
disabled?: boolean;
totalPageCount: number;
totalVisible?: number;
modelValue: number;
}>();
const emit = defineEmits<{
(e: 'update:modelValue', value: number): void;
}>();
const { tt } = useI18n();
const allPages = computed<{ page: number }[]>(() => {
const pages = [];
for (let i = 1; i <= props.totalPageCount; i++) {
pages.push({
page: i
});
}
return pages;
});
const currentPage = computed<number>({
get: () => props.modelValue,
set: (value) => {
if (value && value >= 1 && value <= props.totalPageCount) {
emit('update:modelValue', value);
}
}
});
</script>
@@ -490,49 +490,10 @@
:items="importTransactionsTablePageOptions"
v-model="countPerPage"
/>
<v-pagination density="compact"
:disabled="loading || submitting"
:total-visible="6"
:length="totalPageCount"
v-model="currentPage">
<template #item="{ page, isActive }">
<v-btn density="compact"
variant="text"
:disabled="loading || submitting"
:icon="true"
:color="isActive ? 'primary' : 'default'"
@click="currentPage = parseInt(page)"
v-if="page !== '...'"
>
<span>{{ page }}</span>
</v-btn>
<v-btn density="compact"
variant="text"
color="default"
:disabled="loading || submitting"
:icon="true"
v-if="page === '...'"
>
<span>{{ page }}</span>
<v-menu :disabled="loading || submitting" :close-on-content-click="false" activator="parent">
<v-list>
<v-list-item class="text-sm" density="compact">
<v-list-item-title class="cursor-pointer">
<v-autocomplete density="compact"
width="100"
item-title="page"
item-value="page"
:items="allPages"
:no-data-text="tt('No results')"
v-model="inputCurrentPage"
/>
</v-list-item-title>
</v-list-item>
</v-list>
</v-menu>
</v-btn>
</template>
</v-pagination>
<pagination-buttons density="compact"
:disabled="loading || submitting"
:totalPageCount="totalPageCount"
v-model="currentPage"></pagination-buttons>
</div>
</template>
</v-data-table>
@@ -606,6 +567,7 @@
<script setup lang="ts">
import type { StepBarItem } from '@/components/desktop/StepsBar.vue';
import PaginationButtons from '@/components/desktop/PaginationButtons.vue';
import ConfirmDialog from '@/components/desktop/ConfirmDialog.vue';
import SnackBar from '@/components/desktop/SnackBar.vue';
import BatchReplaceDialog from './BatchReplaceDialog.vue';
@@ -884,27 +846,6 @@ const importTransactionsTablePageOptions = computed<ImportTransactionsDialogTabl
return pageOptions;
});
const allPages = computed<{ page: number }[]>(() => {
const pages = [];
for (let i = 1; i < totalPageCount.value; i++) {
pages.push({
page: i
});
}
return pages;
});
const inputCurrentPage = computed<number>({
get: () => currentPage.value,
set: (value) => {
if (value && value >= 1 && value < totalPageCount.value) {
currentPage.value = value;
}
}
});
const totalPageCount = computed<number>(() => {
if (!importTransactions.value || importTransactions.value.length < 1) {
return 1;