iep-ui/lib/rockontrol/table/index.js

An enterprise-class UI design language and Vue-based implementation

'use strict';

Object.defineProperty(exports, "__esModule", {
  value: true
});

var _babelHelperVueJsxMergeProps = require('babel-helper-vue-jsx-merge-props');

var _babelHelperVueJsxMergeProps2 = _interopRequireDefault(_babelHelperVueJsxMergeProps);

var _extends2 = require('babel-runtime/helpers/extends');

var _extends3 = _interopRequireDefault(_extends2);

var _base = require('../../base');

var _base2 = _interopRequireDefault(_base);

var _configConsumerProps = require('../../config-provider/configConsumerProps');

var _propsUtil = require('../../_util/props-util');

var _porTableTypes = require('./porTableTypes');

var _porTableTypes2 = _interopRequireDefault(_porTableTypes);

var _space = require('../../space');

var _space2 = _interopRequireDefault(_space);

var _tooltip = require('../../tooltip');

var _tooltip2 = _interopRequireDefault(_tooltip);

var _rkWebIcon = require('rk-web-icon');

var _checkbox = require('../../checkbox');

var _checkbox2 = _interopRequireDefault(_checkbox);

var _dropdown = require('../../dropdown');

var _dropdown2 = _interopRequireDefault(_dropdown);

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; }

var ProTable = {
  name: 'AProTable',
  inheritAttrs: false,
  inject: {
    configProvider: { 'default': function _default() {
        return _configConsumerProps.ConfigConsumerProps;
      } }
  },
  props: _porTableTypes2['default'],
  data: function data() {
    return {
      dropdownVisible: false,
      needTotalList: [],

      selectedRows: [],
      selectedRowKeys: [],

      localLoading: false,
      localDataSource: [],
      localPagination: (0, _extends3['default'])({}, this.pagination),

      toolBarSettingsCheck: false
    };
  },

  watch: {
    pageNo: function pageNo(val) {
      (0, _extends3['default'])(this.localPagination, {
        current: val
      });
    },
    pageSize: function pageSize(val) {
      (0, _extends3['default'])(this.localPagination, {
        pageSize: val
      });
    }
  },
  methods: {
    onToolBarRefresh: function onToolBarRefresh() {
      this.localLoading = !this.localLoading;
      this.$emit('onRefresh');
    },
    onToolBarSettings: function onToolBarSettings(e) {
      e.preventDefault();
      this.dropdownVisible = true;
    },
    visibleChange: function visibleChange(e) {
      this.dropdownVisible = e;
    },
    handleToolbarSettings: function handleToolbarSettings(e) {
      this.toolBarSettingsCheck = e.target.checked;
    }
  },
  render: function render() {
    var _this = this;

    var h = arguments[0];

    var _getOptionProps = (0, _propsUtil.getOptionProps)(this),
        customizePrefixCls = _getOptionProps.prefixCls;

    var getPrefixCls = this.configProvider.getPrefixCls;
    var prefixCls = getPrefixCls('pro-table', customizePrefixCls);
    var props = {};
    var showToolBar = this.showToolBar,
        tableTitle = this.tableTitle,
        showRefresh = this.showRefresh,
        showSettings = this.showSettings,
        $slots = this.$slots,
        localLoading = this.localLoading;
    /** 内置的工具栏 */

    var renderToolbar = showToolBar ? h(
      'div',
      { 'class': prefixCls + '-toolbar' },
      [h(
        'div',
        { 'class': prefixCls + '-toolbar-container' },
        [h(
          'div',
          { 'class': prefixCls + '-toolbar-left' },
          [$slots.toolBarTitle ? $slots.toolBarTitle : h(
            'span',
            { 'class': prefixCls + '-toolbar-title' },
            [tableTitle]
          )]
        ), h(
          'div',
          { 'class': prefixCls + '-toolbar-right' },
          [h(
            _space2['default'],
            {
              attrs: { size: 16 }
            },
            [$slots.toolExtra ? $slots.toolExtra : null, showRefresh ? h(
              _tooltip2['default'],
              {
                attrs: { title: '\u5237\u65B0', placement: 'top' }
              },
              [h(
                'div',
                { 'class': prefixCls + '-toolbar-setting-item rotate-90', on: {
                    'click': this.onToolBarRefresh
                  }
                },
                [h(_rkWebIcon.IepIcon, {
                  attrs: { type: 'basic_linear_button_redo', spin: localLoading }
                })]
              )]
            ) : null, showSettings ? h(
              _tooltip2['default'],
              {
                attrs: { title: '\u5217\u8BBE\u7F6E', placement: 'top' }
              },
              [h(
                _dropdown2['default'],
                {
                  attrs: {
                    visible: this.dropdownVisible,
                    trigger: ['click'],
                    placement: 'bottomRight',
                    overlayClassName: prefixCls + '-toolbar-setting-overlay'
                  },
                  on: {
                    'visibleChange': this.visibleChange
                  }
                },
                [h(
                  'div',
                  {
                    'class': prefixCls + '-toolbar-setting-item',
                    on: {
                      'click': function click(e) {
                        return _this.onToolBarSettings(e);
                      }
                    }
                  },
                  [h(_rkWebIcon.IepIcon, {
                    attrs: { type: 'basic_linear_edit_set_up' }
                  })]
                ), h(
                  'a-menu',
                  { slot: 'overlay' },
                  [h(
                    'a-menu-item',
                    { key: '0' },
                    [h(
                      'div',
                      { 'class': prefixCls + '-toolbar-setting-item-title' },
                      [h(
                        _checkbox2['default'],
                        {
                          attrs: {
                            checked: this.toolBarSettingsCheck
                          },
                          on: {
                            'change': function change() {
                              return _this.handleToolbarSettings;
                            }
                          }
                        },
                        ['\u5217\u5C55\u793A']
                      ), h('a', ['\u91CD\u7F6E'])]
                    )]
                  ), h('a-menu-divider'), h(
                    'a-menu-item',
                    { key: '1' },
                    [h(
                      'a',
                      {
                        attrs: { href: 'http://www.taobao.com/' }
                      },
                      ['2nd menu item']
                    )]
                  ), h(
                    'a-menu-item',
                    { key: '3' },
                    ['3rd menu item']
                  )]
                )]
              )]
            ) : null]
          )]
        )]
      )]
    ) : null;

    var localKeys = Object.keys(this.$data);
    Object.keys(_porTableTypes2['default']).forEach(function (k) {
      var localKey = 'local' + k.substring(0, 1).toUpperCase() + k.substring(1);
      if (localKeys.includes(localKey)) {
        props[k] = _this[localKey];
        return props[k];
      }
      if (k === 'rowSelection') {
        if (_this.showToolAlert && _this.rowSelection) {
          props[k] = (0, _extends3['default'])({}, _this.rowSelection, {
            selectedRows: _this.selectedRows,
            selectedRowKeys: _this.selectedRowKeys,
            onChange: function onChange(selectedRowKeys, selectedRows) {
              _this.updateSelect(selectedRowKeys, selectedRows);
              typeof _this[k].onChange !== 'undefined' && _this[k].onChange(selectedRowKeys, selectedRows);
            }
          });
          return props[k];
        } else if (!_this.rowSelection) {
          props[k] = null;
          return props[k];
        }
      }
      _this[k] && (props[k] = _this[k]);
      return props[k];
    });

    return h(
      'div',
      { 'class': prefixCls + '-container' },
      [renderToolbar, h(
        'a-table',
        (0, _babelHelperVueJsxMergeProps2['default'])([{ props: props, scopedSlots: (0, _extends3['default'])({}, this.$scopedSlots) }, {
          on: {
            'change': function change() {
              return _this.loadData;
            },
            'expand': function expand(expanded, record) {
              _this.$emit('expand', expanded, record);
            }
          }
        }]),
        [Object.keys(this.$slots).map(function (name) {
          return h(
            'template',
            { slot: name },
            [_this.$slots[name]]
          );
        })]
      )]
    );
  }
};

/* istanbul ignore next */
ProTable.install = function (Vue) {
  Vue.use(_base2['default']);
  Vue.component(ProTable.name, ProTable);
};
exports['default'] = ProTable;