shu-c-view/packages/grid/pagination/index.js

rollup 打包vue@2.7组件库框架

/* eslint-disable no-unused-vars */
/**
 * Pagination 分页
 */
import _set from 'lodash/set';
import _get from 'lodash/get';
import _isEqual from 'lodash/isEqual';
import _isEmpty from 'lodash/isEmpty';
import _has from 'lodash/has';
import _assign from 'lodash/assign';

const BaseGridPagination = {
  name: 'BaseGridPagination',
  inject: ['getBaseGrid'],
  props: {
    total: {
      type: Number
    },
    currentPage: {
      type: Number,
      default: 1
    },
    pageSize: {
      type: Number,
      default: 10
    },
    layout: {
      type: String,
      default: 'prev, pager, next, jumper, sizes, slot, ->, total'
    },
    // 是否显示分页数量选择器
    isShowPagination: {
      type: Boolean,
      default: true
    },
    // 可拓展按钮
    pagingItems: {
      type: Array,
      default() {
        /* [{text: '同步',listeners: {
              click: ()=>{}
          }},{text: '刷新'}] */
        return [];
      }
    },
    // Pagination Attributes
    paginationAttributes: {
      type: Object,
      default() {
        return {};
      }
    },
    // 是否显示分页栏的刷新小图标
    isRenderRefreshIcon: {
      type: Boolean,
      default: true
    }
  },
  watch: {
    currentPage(val, oldVal) {
      this.curCurrentPage = val;
    }
  },
  data() {
    return {
      curCurrentPage: this.currentPage
    };
  },
  created() {
    this.getBaseGrid.setPaginationEl(this);
  },
  methods: {
    /**
     * @desc 获取 el-pagination 组件
     * @method
     */
    getEl() {
      return this.$refs[`${this._uid}-base-grid-pagination`];
    },
    /**
     * @desc 自定义内容，需要在 layout 中列出 slot
     * @method
     */
    createPagingItemsNodes() {
      const nodes = [];
      for (let i = 0; i < this.pagingItems.length; i += 1) {
        const item = this.pagingItems[i];
        let h = null;
        if (_has(item, 'slotNode')) {
          h = item.slotNode(this.$createElement);
        } else {
          h = this.$createElement(
            'span',
            {
              style: {
                'font-size':
                  _has(item, 'icon') && !_isEmpty(item.icon) ? '16px' : '12px',
                cursor: 'pointer'
              },
              class: { [_get(item, 'icon', '')]: true },
              attrs: { title: _get(item, 'text', '') },
              on: _get(item, 'listeners', {})
            },
            _has(item, 'icon') && !_isEmpty(item.icon) ? null : item.text
          );
        }

        nodes.push(h);
      }
      /* for (const item of this.pagingItems.values()) {
        const h = this.$createElement(
          'span',
          {
            style: { 'font-size': (_has(item, 'icon') && !_isEmpty(item.icon)) ? '16px' : '12px', cursor: 'pointer' },
            class: { [_get(item, 'icon', '')]: true },
            attrs: { title: _get(item, 'text', '') },
            on: _get(item, 'listeners', {})
          },
          (_has(item, 'icon') && !_isEmpty(item.icon)) ? null : item.text
        )
        nodes.push(h)
      } */
      return nodes;
    },
    /**
     * @desc 修改分页 current-page 参数
     * @param {Number} page 页数
     */
    updateCurrentPage(page) {
      this.curCurrentPage = page;
    },
    /**
     * @desc pageSize 改变时会触发
     * @param {number} pageSize - 每页条数
     * @event
     */
    _sizeChangeEvent(pageSize) {
      this.getBaseGrid.onSizeChange(pageSize);
    },
    /**
     * @desc 用户点击上一页按钮改变当前页后触发
     * @param {number} page - 当前页
     * @event
     */
    _currentChangeEvent(page) {
      this.getBaseGrid.onCurrentChange(page);
    },
    /**
     * @desc 点击刷新图标
     * @param {*} event - 点击事件对象
     * @event
     */
    _refreshEvent() {
      this.getBaseGrid.loadGrid();
    }
  },
  render(h) {
    const style = {};
    // v-show
    if (_isEqual(this.isShowPagination, false)) {
      _set(style, 'display', 'none');
    }
    return h(
      'el-pagination',
      {
        ref: `${this._uid}-base-grid-pagination`,
        style,
        props: _assign({ layout: this.layout }, this.paginationAttributes, {
          total: this.total,
          currentPage: this.curCurrentPage,
          pageSize: this.pageSize
        }),
        on: {
          'size-change': this._sizeChangeEvent,
          'current-change': this._currentChangeEvent
        }
      },
      [
        h('template', { slot: 'default' }, [
          this.isRenderRefreshIcon
            ? h('span', {
                style: {
                  'font-size': '16px',
                  cursor: 'pointer'
                },
                class: { 'el-icon-refresh': true },
                attrs: { title: '刷新' },
                on: {
                  click: this._refreshEvent
                }
              })
            : h(),
          this.createPagingItemsNodes()
        ])
      ]
    );
  }
};
export { BaseGridPagination };