deadcxap/inpx-web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Добавлен PageScroller

Browse Source
This commit is contained in:
Book Pauk
2022-08-20 21:34:20 +07:00
parent 507c2a0bbd
commit ff5e3b28d0
3 changed files with 79 additions and 30 deletions
Download Patch File Download Diff File Expand all files Collapse all files

58
client/components/Search/PageScroller/PageScroller.vue Normal file
View File

@@ -0,0 +1,58 @@
<template>
<div v-if="totalPages > 1" class="row items-center q-ml-md q-my-xs" style="font-size: 120%">
<div class="q-mr-xs">
Страница
</div>
<div class="bg-white">
<NumInput
v-model="page" :min="1" :max="totalPages"
style="width: 140px" minus-icon="la la-chevron-circle-left" plus-icon="la la-chevron-circle-right" :disable="disable"
/>
</div>
<div class="q-ml-xs">
из {{ totalPages }}
</div>
</div>
<div v-else class="q-my-sm" />
</template>
<script>
//-----------------------------------------------------------------------------
import vueComponent from '../../vueComponent.js';
import NumInput from '../../share/NumInput.vue';
const componentOptions = {
components: {
NumInput
},
watch: {
modelValue(newValue) {
this.page = newValue;
},
page(newValue) {
this.$emit('update:modelValue', newValue);
},
}
};
class PageScroller {
_options = componentOptions;
_props = {
modelValue: Number,
disable: Boolean,
totalPages: Number,
};
page = 1;
created() {
}
}
export default vueComponent(PageScroller);
//-----------------------------------------------------------------------------
</script>
<style scoped>
</style>

43
client/components/Search/Search.vue
View File

@@ -62,7 +62,7 @@
@click="selectLang"
/>
<div class="q-mx-xs" />
<q-btn round dense style="height: 20px" color="info" icon="la la-question" @click="showSearchHelp" />
<q-btn round dense style="height: 20px" color="grey-13" icon="la la-question" @click="showSearchHelp" />
<div class="q-mx-xs" />
<div class="row items-center q-mt-xs">
@@ -76,18 +76,9 @@
</div>
</div>
<div v-if="totalPages > 1" class="row justify-center items-center q-ml-md q-my-xs" style="font-size: 120%">
<div class="q-mr-xs">
Страница
</div>
<div class="bg-white">
<NumInput v-model="page" :min="1" :max="totalPages" style="width: 150px" />
</div>
<div class="q-ml-xs">
из {{ totalPages }}
</div>
<div class="row justify-center">
<PageScroller v-model="page" :total-pages="totalPages" />
</div>
<div v-else class="q-my-sm" />
<!-- Формирование списка ------------------------------------------------------------------------>
<div v-for="item in tableData" :key="item.key" style="border-bottom: 1px solid #aaaaaa">
@@ -97,18 +88,9 @@
</div>
<!-- Формирование списка конец ------------------------------------------------------------------>
<div v-if="totalPages > 1" class="row justify-center items-center q-ml-md q-my-xs" style="font-size: 120%">
<div class="q-mr-xs">
Страница
</div>
<div class="bg-white">
<NumInput v-model="page" :min="1" :max="totalPages" style="width: 150px" />
</div>
<div class="q-ml-xs">
из {{ totalPages }}
</div>
<div class="row justify-center">
<PageScroller v-model="page" :total-pages="totalPages" />
</div>
<div v-else class="q-my-sm" />
</div>
</div>
</template>
@@ -117,14 +99,14 @@
//-----------------------------------------------------------------------------
import vueComponent from '../vueComponent.js';
import NumInput from '../share/NumInput.vue';
import PageScroller from './PageScroller/PageScroller.vue';
import * as utils from '../../share/utils';
//import _ from 'lodash';
const componentOptions = {
components: {
NumInput,
PageScroller,
},
watch: {
config() {
@@ -250,13 +232,19 @@ class Search {
if (curScrollTop - this.lastScrollTop > 0) {
this.$refs.toolPanel.style.position = 'relative';
this.$refs.toolPanel.style.top = `${this.lastScrollTop2}px`;
} else if (curScrollTop - this.lastScrollTop < 0) {
} else if (curScrollTop - this.lastScrollTop <= 0) {
this.$refs.toolPanel.style.position = 'sticky';
this.$refs.toolPanel.style.top = 0;
this.lastScrollTop2 = curScrollTop;
}
this.lastScrollTop = curScrollTop;
this.lastScrollTop = curScrollTop;
}
scrollToTop() {
this.$refs.scroller.scrollTop = 0;
const curScrollTop = this.$refs.scroller.scrollTop;
this.lastScrollTop = curScrollTop;
}
get foundAuthorsMessage() {
@@ -323,6 +311,7 @@ class Search {
this.searchResult = result;
await this.updateTableData();
this.scrollToTop();
} catch (e) {
this.$root.stdDialog.alert(e.message, 'Ошибка');
return;

8
client/components/share/NumInput.vue
View File

@@ -12,7 +12,7 @@
<q-icon
v-ripple="validate(modelValue - step)"
:class="(validate(modelValue - step) ? '' : 'disable')"
name="la la-minus-circle"
:name="minusIcon"
class="button"
@click="minus"
@mousedown.prevent.stop="onMouseDown($event, 'minus')"
@@ -27,7 +27,7 @@
<q-icon
v-ripple="validate(modelValue + step)"
:class="(validate(modelValue + step) ? '' : 'disable')"
name="la la-plus-circle"
:name="plusIcon"
class="button"
@click="plus"
@mousedown.prevent.stop="onMouseDown($event, 'plus')"
@@ -70,7 +70,9 @@ class NumInput {
max: { type: Number, default: Number.MAX_VALUE },
step: { type: Number, default: 1 },
digits: { type: Number, default: 0 },
disable: Boolean
disable: Boolean,
minusIcon: {type: String, default: 'la la-minus-circle'},
plusIcon: {type: String, default: 'la la-plus-circle'},
};
filteredValue = 0;