[WIP] Добавил квазаровскую пагинацию
This commit is contained in:
35
src/components/base/BasePagination.vue
Normal file
35
src/components/base/BasePagination.vue
Normal file
@@ -0,0 +1,35 @@
|
|||||||
|
<template lang="pug">
|
||||||
|
.flex(class="q-pa-lg flex-center")
|
||||||
|
q-pagination(
|
||||||
|
v-model="value",
|
||||||
|
:max="max",
|
||||||
|
:max-pages="maxPages",
|
||||||
|
:boundary-numbers="boundaryNumbers",
|
||||||
|
:direction-links="directionLinks"
|
||||||
|
)
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
name: "BasePagination",
|
||||||
|
props: {
|
||||||
|
value: Number,
|
||||||
|
max: {
|
||||||
|
default: 1,
|
||||||
|
type: Number,
|
||||||
|
},
|
||||||
|
maxPages: {
|
||||||
|
default: 6,
|
||||||
|
type: Number,
|
||||||
|
},
|
||||||
|
boundaryNumbers: {
|
||||||
|
default: false,
|
||||||
|
type: Boolean,
|
||||||
|
},
|
||||||
|
directionLinks: {
|
||||||
|
default: false,
|
||||||
|
type: Boolean,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
};
|
||||||
|
</script>
|
||||||
@@ -43,6 +43,11 @@
|
|||||||
@next-page="switchNextPage",
|
@next-page="switchNextPage",
|
||||||
@set-current-page="changeCurrentTablePage"
|
@set-current-page="changeCurrentTablePage"
|
||||||
)
|
)
|
||||||
|
//- base-pagination(
|
||||||
|
//- :max="paginationInfo.length",
|
||||||
|
//- :value="currentTablePage",
|
||||||
|
//- directionLinks
|
||||||
|
//- )
|
||||||
base-modal(
|
base-modal(
|
||||||
v-model="showModal",
|
v-model="showModal",
|
||||||
:title="titleModal",
|
:title="titleModal",
|
||||||
@@ -69,6 +74,7 @@ import BaseModal from "@/components/base/BaseModal.vue";
|
|||||||
import ClientTableModal from "./ClientTableModal.vue";
|
import ClientTableModal from "./ClientTableModal.vue";
|
||||||
import FormCreateMedicalCard from "@/pages/clients/components/FormCreateMedicalCard";
|
import FormCreateMedicalCard from "@/pages/clients/components/FormCreateMedicalCard";
|
||||||
import BaseLoader from "@/components/Loader/BaseLoader.vue";
|
import BaseLoader from "@/components/Loader/BaseLoader.vue";
|
||||||
|
import BasePagination from "@/components/base/BasePagination.vue";
|
||||||
export default {
|
export default {
|
||||||
name: "ClientsTable",
|
name: "ClientsTable",
|
||||||
components: {
|
components: {
|
||||||
@@ -82,6 +88,7 @@ export default {
|
|||||||
ClientTableModal,
|
ClientTableModal,
|
||||||
FormCreateMedicalCard,
|
FormCreateMedicalCard,
|
||||||
BaseLoader,
|
BaseLoader,
|
||||||
|
BasePagination,
|
||||||
},
|
},
|
||||||
props: {
|
props: {
|
||||||
openForm: Function,
|
openForm: Function,
|
||||||
|
|||||||
@@ -330,8 +330,10 @@ export default {
|
|||||||
(e) =>
|
(e) =>
|
||||||
e.date === moment(this.replacementSheet.date).format("YYYY-MM-DD")
|
e.date === moment(this.replacementSheet.date).format("YYYY-MM-DD")
|
||||||
);
|
);
|
||||||
this.replacementSheet.start_time = dateSchedule?.start_time;
|
if (dateSchedule?.start_time) {
|
||||||
this.replacementSheet.end_time = dateSchedule?.end_time;
|
this.replacementSheet.start_time = dateSchedule?.start_time;
|
||||||
|
this.replacementSheet.end_time = dateSchedule?.end_time;
|
||||||
|
}
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
watch: {
|
watch: {
|
||||||
|
|||||||
@@ -81,10 +81,9 @@ export default {
|
|||||||
this.setActiveButton();
|
this.setActiveButton();
|
||||||
return {
|
return {
|
||||||
"--bg-color-status": this.activeButton?.color,
|
"--bg-color-status": this.activeButton?.color,
|
||||||
"--text-status":
|
"--text-status": !this.template.item?.symbol
|
||||||
!this.template.item?.symbol && this.activeCell
|
? this.activeButton?.text
|
||||||
? this.activeButton?.text
|
: this.template.item?.symbol,
|
||||||
: this.template.item?.symbol,
|
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
@@ -173,7 +172,7 @@ export default {
|
|||||||
return {
|
return {
|
||||||
"set-template":
|
"set-template":
|
||||||
!!this.template.item?.label && this.setActiveTemplate(),
|
!!this.template.item?.label && this.setActiveTemplate(),
|
||||||
status: !!this.activeButton && this.activeCell,
|
status: !!this.activeButton,
|
||||||
"set-date": !this.activeButton && this.activeCell,
|
"set-date": !this.activeButton && this.activeCell,
|
||||||
};
|
};
|
||||||
}
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user