7x31
/
cmdb
mirror of https://github.com/veops/cmdb.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

refactor(ui):extract pager components ()

This commit is contained in:
wang-liang0615 2024-01-04 13:41:07 +08:00 committed by GitHub
parent 6c7bc690cc
commit 21bb741a02
16 changed files with 152 additions and 244 deletions

2
cmdb-ui/src/components/Pager/index.js Normal file
View File

@ -0,0 +1,2 @@
import Pager from './index.vue'
export default Pager

138
cmdb-ui/src/components/Pager/index.vue Normal file
View File

@ -0,0 +1,138 @@
<template>
<div>
<a-row class="row" type="flex" justify="end">
<a-col>
<a-space align="end">
<a-button
class="left-button"
size="small"
:disabled="prevIsDisabled"
@click="prevPage"
><a-icon
type="left"
/></a-button>
<a-button class="page-button" size="small">{{ currentPage }}</a-button>
<a-button
class="right-button"
size="small"
:disabled="nextIsDisabled"
@click="nextPage"
><a-icon
type="right"
/></a-button>
<a-dropdown
class="dropdown"
size="small"
placement="topCenter"
:trigger="['click']"
:disabled="dropdownIsDisabled"
>
<a-menu slot="overlay">
<a-menu-item v-for="(size, index) in pageSizes" :key="index" @click="handleItemClick(size)">
{{ `${size}${$t('itemsPerPage')}` }}
</a-menu-item>
</a-menu>
<a-button size="small">{{ `${pageSize}${$t('itemsPerPage')}` }}<a-icon type="down" /> </a-button>
</a-dropdown>
</a-space>
</a-col>
</a-row>
</div>
</template>
<script>
export default {
name: 'Pager',
props: {
currentPage: {
type: Number,
required: true,
},
pageSize: {
type: Number,
required: true,
},
pageSizes: {
type: Array,
required: true,
},
total: {
type: Number,
required: true,
},
isLoading: {
type: Boolean,
required: false,
},
},
data() {
return {
dropdownIsDisabled: false,
prevIsDisabled: true,
}
},
computed: {
nextIsDisabled() {
return this.isLoading || this.total < this.pageSize
},
},
watch: {
isLoading: {
immediate: true,
handler: function(val) {
if (val) {
this.dropdownIsDisabled = true
this.prevIsDisabled = true
} else {
this.dropdownIsDisabled = false
if (this.currentPage === 1) {
this.prevIsDisabled = true
} else {
this.prevIsDisabled = false
}
}
},
},
currentPage: {
immediate: true,
handler: function(val) {
if (val === 1) {
this.prevIsDisabled = true
}
},
},
},
methods: {
handleItemClick(size) {
this.$emit('showSizeChange', size)
},
nextPage() {
const pageNum = this.currentPage + 1
this.$emit('change', pageNum)
},
prevPage() {
const pageNum = this.currentPage - 1
this.$emit('change', pageNum)
},
},
}
</script>
<style lang="less" scoped>
.row {
margin-top: 5px;
.left-button {
padding: 0;
width: 24px;
}
.right-button {
padding: 0;
width: 24px;
}
.page-button {
padding: 0;
width: 24px;
}
}
</style>

116
cmdb-ui/src/modules/acl/views/module/pager.vue
View File

@ -1,116 +0,0 @@
<template>
<div>
<a-row class="row" type="flex" justify="end">
<a-col>
<a-space align="end">
<a-button class="left-button" size="small" :disabled="prevIsDisabled" @click="prevPage"><a-icon type="left" /></a-button>
<a-button class="page-button" size="small">{{ currentPage }}</a-button>
<a-button class="right-button" size="small" :disabled="nextIsDisabled" @click="nextPage"><a-icon type="right" /></a-button>
<a-dropdown class="dropdown" size="small" placement="topCenter" :trigger="['click']" :disabled="dropdownIsDisabled">
<a-menu slot="overlay">
<a-menu-item v-for="(size,index) in pageSizes" :key="index" @click="handleItemClick(size)">
{{ size }}{{ $t('itemsPerPage') }}
</a-menu-item>
</a-menu>
<a-button size="small"> {{ pageSize }}{{ $t('itemsPerPage') }}<a-icon type="down" /> </a-button>
</a-dropdown>
</a-space>
</a-col>
</a-row>
</div>
</template>
<script>
export default {
props: {
currentPage: {
type: Number,
required: true
},
pageSize: {
type: Number,
required: true
},
pageSizes: {
type: Array,
required: true
},
total: {
type: Number,
required: true
},
isLoading: {
type: Boolean,
required: false
}
},
data() {
return {
dropdownIsDisabled: false,
prevIsDisabled: true,
}
},
computed: {
nextIsDisabled() {
return this.isLoading || this.total < this.pageSize
}
},
watch: {
isLoading: {
immediate: true,
handler: function (val) {
if (val === true) {
this.dropdownIsDisabled = true
this.prevIsDisabled = true
} else {
this.dropdownIsDisabled = false
if (this.currentPage === 1) {
this.prevIsDisabled = true
} else {
this.prevIsDisabled = false
}
}
}
},
currentPage: {
immediate: true,
handler: function (val) {
if (val === 1) {
this.prevIsDisabled = true
}
}
}
},
methods: {
handleItemClick(size) {
this.$emit('showSizeChange', size)
},
nextPage() {
const pageNum = this.currentPage + 1
this.$emit('change', pageNum)
},
prevPage() {
const pageNum = this.currentPage - 1
this.$emit('change', pageNum)
}
}
}
</script>
<style lang="less" scoped>
.row{
margin-top: 5px;
.left-button{
padding: 0;
width: 24px;
}
.right-button{
padding: 0;
width: 24px;
}
.page-button{
padding: 0;
width: 24px;
}
}
</style>

2
cmdb-ui/src/modules/acl/views/module/permissionHistoryTable.vue
View File

@ -79,7 +79,7 @@
<script>
import _ from 'lodash'
import Pager from './pager.vue'
import Pager from '@/components/Pager'
import SearchForm from './searchForm.vue'
import { searchPermissonHistory } from '@/modules/acl/api/history'
import debounce from 'lodash/debounce'

2
cmdb-ui/src/modules/acl/views/module/resourceHistoryTable.vue
View File

@ -62,7 +62,7 @@
<script>
import _ from 'lodash'
import Pager from './pager.vue'
import Pager from '@/components/Pager'
import SearchForm from './searchForm.vue'
import { searchResourceHistory } from '@/modules/acl/api/history'
export default {

2
cmdb-ui/src/modules/acl/views/module/resourceTypeHistoryTable.vue
View File

@ -56,7 +56,7 @@
<script>
import _ from 'lodash'
import Pager from './pager.vue'
import Pager from '@/components/Pager'
import SearchForm from './searchForm.vue'
import { searchResourceHistory } from '@/modules/acl/api/history'
export default {

2
cmdb-ui/src/modules/acl/views/module/roleHistoryTable.vue
View File

@ -76,7 +76,7 @@
<script>
import _ from 'lodash'
import Pager from './pager.vue'
import Pager from '@/components/Pager'
import SearchForm from './searchForm.vue'
import { searchRoleHistory } from '@/modules/acl/api/history'
export default {

2
cmdb-ui/src/modules/acl/views/module/triggerHistoryTable.vue
View File

@ -55,7 +55,7 @@
<script>
import _ from 'lodash'
import Pager from './pager.vue'
import Pager from '@/components/Pager'
import SearchForm from './searchForm.vue'
import { searchTriggerHistory } from '@/modules/acl/api/history'
export default {

2
cmdb-ui/src/modules/acl/views/operation_history/modules/permissionTable.vue
View File

@ -81,7 +81,7 @@
<script>
import _ from 'lodash'
import debounce from 'lodash/debounce'
import Pager from '../../module/pager.vue'
import Pager from '@/components/Pager'
import SearchForm from '../../module/searchForm.vue'
import { searchApp } from '@/modules/acl/api/app'
import { searchPermissonHistory } from '@/modules/acl/api/history'

2
cmdb-ui/src/modules/acl/views/operation_history/modules/resourceHistoryTable.vue
View File

@ -64,7 +64,7 @@
<script>
import _ from 'lodash'
import Pager from '../../module/pager.vue'
import Pager from '@/components/Pager'
import SearchForm from '../../module/searchForm.vue'
import { searchResourceHistory } from '@/modules/acl/api/history'
import { searchUser } from '@/modules/acl/api/user'

2
cmdb-ui/src/modules/acl/views/operation_history/modules/resourceTypeHistoryTable.vue
View File

@ -58,7 +58,7 @@
<script>
import _ from 'lodash'
import Pager from '../../module/pager.vue'
import Pager from '@/components/Pager'
import SearchForm from '../../module/searchForm.vue'
import { searchResourceHistory } from '@/modules/acl/api/history'
import { searchUser } from '@/modules/acl/api/user'

2
cmdb-ui/src/modules/acl/views/operation_history/modules/roleHistoryTable.vue
View File

@ -76,7 +76,7 @@
<script>
import _ from 'lodash'
import Pager from '../../module/pager.vue'
import Pager from '@/components/Pager'
import SearchForm from '../../module/searchForm.vue'
import { searchRoleHistory } from '@/modules/acl/api/history'
import { searchApp } from '@/modules/acl/api/app'

2
cmdb-ui/src/modules/acl/views/operation_history/modules/triggerHistoryTable.vue
View File

@ -57,7 +57,7 @@
<script>
import _ from 'lodash'
import Pager from '../../module/pager.vue'
import Pager from '@/components/Pager'
import SearchForm from '../../module/searchForm.vue'
import { searchTriggerHistory } from '@/modules/acl/api/history'
import { getTriggers } from '@/modules/acl/api/trigger'

2
cmdb-ui/src/modules/cmdb/views/operation_history/modules/ciTable.vue
View File

@ -102,7 +102,7 @@
</template>
<script>
import { mapState } from 'vuex'
import Pager from './pager.vue'
import Pager from '@/components/Pager'
import SearchForm from './searchForm.vue'
import { getCIHistoryTable, getUsers } from '@/modules/cmdb/api/history'
import { getCITypes } from '@/modules/cmdb/api/CIType'

116
cmdb-ui/src/modules/cmdb/views/operation_history/modules/pager.vue
View File

@ -1,116 +0,0 @@
<template>
<div>
<a-row class="row" type="flex" justify="end">
<a-col>
<a-space align="end">
<a-button class="left-button" size="small" :disabled="prevIsDisabled" @click="prevPage"><a-icon type="left" /></a-button>
<a-button class="page-button" size="small" >{{ currentPage }}</a-button>
<a-button class="right-button" size="small" :disabled="nextIsDisabled" @click="nextPage"><a-icon type="right" /></a-button>
<a-dropdown class="dropdown" placement="topCenter" :trigger="['click']" :disabled="dropdownIsDisabled">
<a-menu slot="overlay">
<a-menu-item v-for="(size,index) in pageSizes" :key="index" @click="handleItemClick(size)">
{{ size }}{{ $t('cmdb.history.itemsPerPage') }}
</a-menu-item>
</a-menu>
<a-button size="small"> {{ pageSize }}{{ $t('cmdb.history.itemsPerPage') }} <a-icon type="down" /> </a-button>
</a-dropdown>
</a-space>
</a-col>
</a-row>
</div>
</template>
<script>
export default {
props: {
currentPage: {
type: Number,
required: true
},
pageSize: {
type: Number,
required: true
},
pageSizes: {
type: Array,
required: true
},
total: {
type: Number,
required: true
},
isLoading: {
type: Boolean,
required: false
}
},
data() {
return {
dropdownIsDisabled: false,
prevIsDisabled: true,
}
},
computed: {
nextIsDisabled() {
return this.isLoading || this.total < this.pageSize
}
},
watch: {
isLoading: {
immediate: true,
handler: function (val) {
if (val === true) {
this.dropdownIsDisabled = true
this.prevIsDisabled = true
} else {
this.dropdownIsDisabled = false
if (this.currentPage === 1) {
this.prevIsDisabled = true
} else {
this.prevIsDisabled = false
}
}
}
},
currentPage: {
immediate: true,
handler: function (val) {
if (val === 1) {
this.prevIsDisabled = true
}
}
}
},
methods: {
handleItemClick(size) {
this.$emit('showSizeChange', size)
},
nextPage() {
const pageNum = this.currentPage + 1
this.$emit('change', pageNum)
},
prevPage() {
const pageNum = this.currentPage - 1
this.$emit('change', pageNum)
}
}
}
</script>
<style lang="less" scoped>
.row{
margin-top: 5px;
.left-button{
padding: 0;
width: 24px;
}
.right-button{
padding: 0;
width: 24px;
}
.page-button{
padding: 0;
width: 24px;
}
}
</style>

2
cmdb-ui/src/modules/cmdb/views/operation_history/modules/relation.vue
View File

@ -134,7 +134,7 @@
<script>
import { mapState } from 'vuex'
import SearchForm from './searchForm'
import Pager from './pager.vue'
import Pager from '@/components/Pager'
import { getCITypes } from '@/modules/cmdb/api/CIType'
import { getRelationTable, getUsers } from '@/modules/cmdb/api/history'
import { getRelationTypes } from '@/modules/cmdb/api/relationType'