feat： 添加分页组件 用户表格的编辑框的正确打开
This commit is contained in:
zhangyu
242
src/components/common/pagination.vue
Normal file
242
src/components/common/pagination.vue
Normal file
@@ -0,0 +1,242 @@
|
||||
<style lang="scss" scoped>
|
||||
.pagination {
|
||||
padding-top: 8px;
|
||||
text-align: center;
|
||||
max-height: 42px;
|
||||
}
|
||||
.pagination-top .pagination {
|
||||
padding-top: 0;
|
||||
}
|
||||
.pagination /deep/ .el-pagination {
|
||||
max-height: 42px;
|
||||
padding-right: 0;
|
||||
}
|
||||
.pagination-size-select /deep/ .el-input--mini .el-input__inner{
|
||||
height: 20px;
|
||||
line-height: 20px;
|
||||
margin: 5px 0 5px 5px;
|
||||
}
|
||||
.pagination-size-select input{
|
||||
|
||||
}
|
||||
/deep/ .el-pager li, /deep/ .el-pagination .btn-next,/deep/ .el-pagination .btn-prev {
|
||||
margin:5px 5px 0px 5px;
|
||||
padding: 0 4px;
|
||||
font-size: 13px;
|
||||
min-width: 20px;
|
||||
height: 20px;
|
||||
line-height: 20px;
|
||||
-webkit-box-sizing: border-box;
|
||||
box-sizing: border-box;
|
||||
text-align: center;
|
||||
border: 1px solid rgba(154,154,154,0.20);
|
||||
border-radius: 2px;
|
||||
border-radius: 2px;
|
||||
}
|
||||
/deep/ .el-pagination .el-pager li.btn-quicknext, /deep/ .el-pager li.btn-quickprev {
|
||||
line-height: 20px;
|
||||
}
|
||||
/deep/ .el-pagination .el-pager .more::before {
|
||||
line-height: 20px;
|
||||
}
|
||||
/deep/ .el-pagination .el-pager .more {
|
||||
background-color: $content-right-background-color;
|
||||
}
|
||||
.btn-next, .btn-prev {
|
||||
background-color: $content-right-background-color !important;
|
||||
}
|
||||
.pagination input {
|
||||
background-color: $content-right-background-color !important;
|
||||
}
|
||||
/deep/ .el-pager li.number{
|
||||
font-family: NotoSansSC-Regular;
|
||||
color: #666666;
|
||||
letter-spacing: 0;
|
||||
font-weight:normal;
|
||||
background-color: $content-right-background-color;
|
||||
}
|
||||
/deep/ .el-pager li.number.active{
|
||||
font-family: NotoSansSC-Regular;
|
||||
color: #FFFFFF;
|
||||
letter-spacing: 0;
|
||||
}
|
||||
|
||||
/deep/ .el-pagination .el-pager li.active {
|
||||
background-color: $global-text-color-active;
|
||||
border-radius: 2px;
|
||||
border-radius: 2px;
|
||||
}
|
||||
/deep/ .el-pager li:hover, .el-pagination .btn-next:hover, .el-pagination .btn-prev:hover {
|
||||
font-family: NotoSansSC-Regular;
|
||||
color: #666666;
|
||||
letter-spacing: 0;
|
||||
font-weight:normal;
|
||||
}
|
||||
/deep/ .el-pagination__sizes .el-input .el-input__inner,/deep/ .el-pagination__editor.el-input .el-input__inner{
|
||||
height: 20px;
|
||||
border-color: rgba(154,154,154,0.20);
|
||||
}
|
||||
/deep/ .el-pagination__sizes .el-input .el-input__inner:hover{
|
||||
border-color: rgba(154,154,154,0.20);
|
||||
}
|
||||
</style>
|
||||
|
||||
<template>
|
||||
<div class="pagination">
|
||||
<el-pagination
|
||||
ref="page"
|
||||
@size-change="size"
|
||||
@prev-click="prev"
|
||||
@next-click="next"
|
||||
@current-change="current"
|
||||
:current-page="pageObj.pageNo"
|
||||
:page-sizes="pageSizes?pageSizes:[20, 50, 100]"
|
||||
:page-size="Number(pageObj.pageSize)"
|
||||
layout="total, prev, pager, next, slot"
|
||||
:total="pageObj.total"
|
||||
>
|
||||
<el-select v-model="pageSize" :placeholder="pageSize+$t('pageSize')" size="mini" :popper-append-to-body="appendToBody" class="pagination-size-select" @change="size" :popper-class="popClass" @visible-change="popperVisible">
|
||||
<el-option v-for="(item, index) in pageSizes" :key="index" :label="item.label" :value="item.value"></el-option>
|
||||
</el-select>
|
||||
|
||||
</el-pagination>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {defaultPageSize} from '@/utils/constants'
|
||||
|
||||
export default {
|
||||
name: 'pagination',
|
||||
// props: ['pageObj', 'tableId', 'postPageSizes'],
|
||||
props: {
|
||||
pageObj: {},
|
||||
tableId: {},
|
||||
postPageSizes: {},
|
||||
appendToBody: { default: true },
|
||||
popClass: {}
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
pageSize: defaultPageSize,
|
||||
pageSizes: [
|
||||
{
|
||||
label: '20' + this.$t('pageSize'),
|
||||
value: 20
|
||||
},
|
||||
{
|
||||
label: '50' + this.$t('pageSize'),
|
||||
value: 50
|
||||
},
|
||||
{
|
||||
label: '100' + this.$t('pageSize'),
|
||||
value: 100
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
popperVisible: function (visible) {
|
||||
if (visible == true) {
|
||||
this.$nextTick(() => {
|
||||
if (this.popClass && this.popClass === 'out-popper-fix') {
|
||||
const popDoms = document.querySelectorAll('.out-popper-fix')
|
||||
popDoms.forEach(item => {
|
||||
item.style.bottom = item.style.top
|
||||
item.style.top = 'unset'
|
||||
|
||||
const icon = item.querySelector('.popper__arrow')
|
||||
if (icon) {
|
||||
icon.style.bottom = icon.style.top
|
||||
icon.style.top = 'unset'
|
||||
icon.style.transform = 'rotate(180deg)'
|
||||
}
|
||||
})
|
||||
}
|
||||
})
|
||||
}
|
||||
},
|
||||
background () {
|
||||
this.backgroundColor()
|
||||
},
|
||||
// 点击上一页箭头
|
||||
prev () {
|
||||
this.backgroundColor()
|
||||
this.scrollbarToTop()
|
||||
},
|
||||
// 点击下一页箭头
|
||||
next (val) {
|
||||
this.backgroundColor()
|
||||
this.scrollbarToTop()
|
||||
},
|
||||
// currentPage 改变时会触发
|
||||
current (val) {
|
||||
this.$emit('pageNo', val)
|
||||
this.backgroundColor()
|
||||
this.scrollbarToTop()
|
||||
},
|
||||
size (val) {
|
||||
// eslint-disable-next-line vue/no-mutating-props
|
||||
this.pageObj.pageNo = 1
|
||||
this.$emit('pageSize', val)
|
||||
this.backgroundColor()
|
||||
},
|
||||
scrollbarToTop () {
|
||||
this.$nextTick(() => {
|
||||
const wraps = document.querySelectorAll('.el-table__body-wrapper')
|
||||
wraps.forEach(wrap => {
|
||||
if (wrap._ps_) {
|
||||
wrap.scrollTop = 0
|
||||
}
|
||||
})
|
||||
})
|
||||
},
|
||||
resetPageSizes: function () {
|
||||
if (this.postPageSizes) {
|
||||
this.pageSizes = this.postPageSizes.map((item) => {
|
||||
return { label: item + this.$t('pageSize'), value: item }
|
||||
})
|
||||
}
|
||||
},
|
||||
// 设置当前页的样式
|
||||
backgroundColor () {
|
||||
this.list = this.$refs.page.$el.children[2].children
|
||||
for (let i = 0; i < this.list.length; i++) {
|
||||
// const element = this.list[i]
|
||||
}
|
||||
}
|
||||
},
|
||||
mounted () {
|
||||
if (this.postPageSizes && this.postPageSizes.length > 0) {
|
||||
this.pageSize = this.postPageSizes[0]
|
||||
this.resetPageSizes()
|
||||
} else {
|
||||
const pageSize = localStorage.getItem('nz-pageSize-' + localStorage.getItem('nz-username') + '-' + this.tableId)
|
||||
if (pageSize != 'undefined' && pageSize != null) {
|
||||
this.pageSize = parseInt(pageSize)
|
||||
}
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
postPageSizes: {
|
||||
immediate: true,
|
||||
deep: true,
|
||||
handler (n, o) {
|
||||
this.resetPageSizes()
|
||||
}
|
||||
},
|
||||
popClass: {
|
||||
immediate: true,
|
||||
handler (n, o) {
|
||||
}
|
||||
},
|
||||
pageObj: {
|
||||
immediate: true,
|
||||
deep: true,
|
||||
handler (n, o) {
|
||||
console.log(n)
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -1,5 +1,5 @@
|
||||
<template>
|
||||
<div v-clickoutside="{object: editObject, func: esc}" class="right-box right-box-user">
|
||||
<div v-click-outside="{object: editObject, func: esc}" class="right-box right-box-user">
|
||||
<div class="right-box__header">
|
||||
<div class="header__title">{{editObject.id ? $t('config.user.editUser') : $t('config.user.createUser')}}</div>
|
||||
<div class="header__operation">
|
||||
@@ -81,6 +81,7 @@
|
||||
|
||||
<script>
|
||||
import rightBoxMixin from '@/mixins/rightBox'
|
||||
import { onMounted } from "vue";
|
||||
import { get, post, put } from '@/utils/http'
|
||||
export default {
|
||||
name: 'UserBox',
|
||||
@@ -138,18 +139,23 @@ export default {
|
||||
let roleData = []
|
||||
const getRoleData = async () => {
|
||||
await get('sys/role?pageSize=-1').then(response => {
|
||||
console.log(response);
|
||||
if (response.code === 200) {
|
||||
roleData = response.data.list
|
||||
} else {
|
||||
this.$message.error('load roles faild')
|
||||
}
|
||||
})
|
||||
}
|
||||
// onMounted(getRoleData)
|
||||
return {
|
||||
roleData,
|
||||
getRoleData
|
||||
}
|
||||
},
|
||||
created() {
|
||||
},
|
||||
mounted() {
|
||||
this.getRoleData()
|
||||
},
|
||||
methods: {
|
||||
isCurrentUser () {
|
||||
return function (username) {
|
||||
|
||||
@@ -41,6 +41,13 @@
|
||||
</template>
|
||||
</template>
|
||||
<template v-else-if="item.prop === 'status'">
|
||||
<el-switch
|
||||
v-model="scope.row.status"
|
||||
:active-color="theme.themeColor"
|
||||
active-value="1"
|
||||
inactive-value="0"
|
||||
@change="val => {statusChange(scope.row)}">
|
||||
</el-switch>
|
||||
</template>
|
||||
<span v-else>{{scope.row[item.prop]}}</span>
|
||||
</template>
|
||||
@@ -55,6 +62,17 @@
|
||||
<template #default="scope">
|
||||
<div class="table-operation-items">
|
||||
<button class="table-operation-item" @click="tableOperation(['edit', scope.row])"><i class="nz-icon nz-icon-view1"></i></button>
|
||||
<el-dropdown size="medium" trigger="hover" @command="tableOperation">
|
||||
<div class="table-operation-item table-operation-item--more">
|
||||
<i class="nz-icon nz-icon-more3"></i>
|
||||
</div>
|
||||
<template #dropdown>
|
||||
<el-dropdown-menu >
|
||||
<el-dropdown-item v-has="'user_edit'" :command="['edit', scope.row]"><i class="nz-icon nz-icon-edit"></i><span class="operation-dropdown-text">{{$t('overall.edit')}}</span></el-dropdown-item>
|
||||
<el-dropdown-item v-has="'user_delete'" :command="['delete', scope.row]" :disabled="scope.row.id === 1"><i class="nz-icon nz-icon-delete"></i><span class="operation-dropdown-text">{{$t('overall.delete')}}</span></el-dropdown-item>
|
||||
</el-dropdown-menu>
|
||||
</template>
|
||||
</el-dropdown>
|
||||
</div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
|
||||
Reference in New Issue
Block a user