feat：添加分页组件用户表格的编辑框的正确打开

2021-06-11 16:59:16 +08:00
parent 0e715f090f
commit ffc7652fc5
10 changed files with 360 additions and 9 deletions
--- a/src/assets/css/main.scss
+++ b/src/assets/css/main.scss
@@ -2,4 +2,5 @@
@import './theme';
@import './common';
@import './rightBoxCommon';
-@import './tableCommon';
+@import './tableCommon';
+@import '../stylus/index.scss';
--- a/src/assets/css/tableCommon.scss
+++ b/src/assets/css/tableCommon.scss
@@ -338,7 +338,7 @@
    }
  }
  /* end--覆盖el-table边框、gutter等样式 */
-  .pagination-bottom {
+  .cn-pagination{
    position: absolute;
    bottom: 8px;
    height: 48px;
@@ -379,3 +379,11 @@
  height: 1px;
  background-color: white;
 }
+.col-resize-area {
+  position: absolute;
+  top: 0;
+  right: 0;
+  width: 4px;
+  height: 100%;
+  cursor: col-resize;
+}
--- a/src/assets/css/theme.scss
+++ b/src/assets/css/theme.scss
@@ -56,6 +56,9 @@ $--color-warning: $--color-primary; //全局警告橙色
 $--color-suspended: #9e9c98; //全局停用色灰色
 $--color-monitor: #98AEC5; //全局停用色灰色

+$global-text-color-active: $--color-primary; // 全局文字active字色
+
+$content-right-background-color: #f9f9f9; //右侧背景色
 /** 改变 icon 字体路径变量，并引入element-ui变量文件 **/
 $--font-path: '~element-plus/lib/theme-chalk/fonts';
@import "~element-plus/packages/theme-chalk/src/index";
--- a/src/assets/stylus/index.scss
+++ b/src/assets/stylus/index.scss
@@ -0,0 +1,52 @@
+$global-text-color-active: #fa901c; // 全局文字active字色
+
+$content-right-background-color: #f9f9f9; //右侧背景色
+
+$header-text-color: #e5e5e5; // header默认字色
+$header-text-color-active: #fff; // header高亮字色
+$header-text-color-hover: #444; //header hover字色
+$header-background-color-hover: #3d4959; //菜单鼠标悬停背景色
+
+$btn-normal-background-color: linear-gradient(180deg, #F5B93E 0%, #EE9D3F 100%); //橙色按钮背景颜色
+$btn-normal-background-color-hover: #EE9D3F ; //橙色按钮hover背景颜色
+$btn-normal-txt-color: #fff; //橙色按钮字体颜色
+$btn-normal-shadow: 0 0 1px 1px rgba(162,162,162,0.50); //橙色按钮边框阴影
+// $btn-light-background-color: linear-gradient(rgb(247, 248, 250) 0%, rgb(231, 234, 240) 100%); //灰色按钮背景颜色
+// $btn-light-background-color-hover: linear-gradient(180deg, rgb(247, 248, 250) 0%, rgb(247, 248, 250) 100%); //灰色按钮hover背景颜色
+$btn-light-background-color: #F9F9F9;
+$btn-light-background-color-hover: #FFF;
+$btn-light-txt-color: #666; //灰色按钮字体颜色
+$btn-light-shadow: 0 0 1px 1px rgba(162,162,162,0.50); //灰色按钮边框阴影
+
+$btn-normal-background-color-new:#FA901C;//新橙色按钮背景颜色
+$btn-normal-background-color-hover-new:#FE9F37;//新橙色按钮hover背景颜色
+$btn-normal-background-color-active-new:#F37F00;//新橙色按钮active背景颜色
+$btn-normal-txt-color-new: #fff; //新橙色按钮字体颜色
+
+$btn-error-background-color-new:#EF7C62;//新红色按钮背景颜色
+$btn-error-background-color-hover-new:#F38b73;//新红色按钮hover背景颜色
+$btn-error-background-color-active-new:#Eb6D51;//新红色按钮active背景颜色
+$btn-error-txt-color-new: #fff; //新红色按钮字体颜色
+
+$btn-light-border-color-new:rgba(0,0,0,0.15);//新灰色按钮背景颜色
+$btn-light-border-color-hover-new:rgba(250,144,28,0.3);//新灰色按钮hover背景颜色
+$btn-light-txt-color-hover-new:rgba(250,144,28,1);//新灰色按钮hover背景颜色
+$btn-light-border-color-active-new:#FA901C;//新灰色按钮active背景颜色
+$btn-light-txt-color-new: #333;//新灰色色按钮字体颜色
+
+$pop-box-shadow: 0 0 12px 0 rgba(0,0,0,0.2);
+
+$box-title-color: #333; //弹框标题字体颜色
+$box-label-color: #666; //弹框label字色
+
+$content-left-text-color: #666; //左侧菜单默认字色
+
+$dropdown-hover-background-color: #fafafa; //下拉鼠标悬停背景色
+
+$danger-color: #DE5D3F; //全局警告色红色
+$success-color: #23BF9A; //全局正常色绿色
+$warning-color: $btn-light-txt-color-hover-new; //全局警告橙色
+$suspended-color: #9e9c98; //全局停用色灰色
+
+$left-menu-bgcolor:#FFF;
+
--- a/src/components/common/pagination.vue
+++ b/src/components/common/pagination.vue
@@ -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>
--- a/src/components/rightBox/settings/UserBox.vue
+++ b/src/components/rightBox/settings/UserBox.vue
@@ -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) {
--- a/src/components/table/settings/UserTable.vue
+++ b/src/components/table/settings/UserTable.vue
@@ -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>
--- a/src/mixins/dataList.js
+++ b/src/mixins/dataList.js
@@ -2,8 +2,11 @@ import { tableSort } from '@/utils/tools'
 import { defaultPageSize, fromRoute, position } from '@/utils/constants'
 import { get, del } from '@/utils/http'
 import { ref } from 'vue'
-
+import pagination from '@/components/common/pagination'
 export default {
+  components:{
+    pagination
+  },
  data () {
    return {
      fromRoute: fromRoute,
@@ -120,7 +123,7 @@ export default {
    edit (u) {
      get(`${this.url}/${u.id}`).then(response => {
        if (response.code === 200) {
-          this.object = response.data
+          this.object = response.user
          this.rightBox.show = true
        }
      })
--- a/src/views/settings/User.vue
+++ b/src/views/settings/User.vue
@@ -35,7 +35,7 @@
        />
      </template>
      <template #pagination>
-<!--        <Pagination ref="Pagination" :page-obj="pageObj" :table-id="tableId" @pageNo='pageNo' @pageSize='pageSize'></Pagination> -->
+        <pagination ref="pagination" :page-obj="pageObj" :table-id="tableId" @pageNo='pageNo' @pageSize='pageSize'></pagination>
      </template>
    </cn-data-list>
    <transition name="right-box">
@@ -56,12 +56,12 @@ import { put } from '@/utils/http'

 export default {
  name: 'User',
+  mixins: [dataListMixin],
  components: {
    cnDataList,
    userTable,
    userBox
  },
-  mixins: [dataListMixin],
  data () {
    return {
      url: 'sys/user',
--- a/ws.js
+++ b/ws.js
@@ -0,0 +1,18 @@
+'use strict'
+const path = require('path')
+
+module.exports = {
+  context: path.resolve(__dirname, './'),
+  resolve: {
+    extensions: ['.js', '.vue', '.json'],
+    alias: {
+      '@': path.resolve('src'),
+      '@assets': path.resolve(__dirname, 'src/assets'),
+      '@pages': path.resolve(__dirname, 'src/pages'),
+      '@/components': path.resolve(__dirname, 'src/components'),
+      '@api': path.resolve(__dirname, 'src/api'),
+      '@plug': path.resolve(__dirname, 'src/plugins'),
+      '@utils': path.resolve(__dirname, 'src/utils')
+    }
+  }
+}