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

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

import _mergeJSXProps from 'babel-helper-vue-jsx-merge-props';
import _extends from 'babel-runtime/helpers/extends';
import Base from '../../base';
import { ConfigConsumerProps } from '../../config-provider/configConsumerProps';
import { getOptionProps } from '../../_util/props-util';
import porTableTypes from './porTableTypes';
import Space from '../../space';
import Tooltip from '../../tooltip';
import { IepIcon } from 'rk-web-icon';
import Checkbox from '../../checkbox';
import Dropdown from '../../dropdown';

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

      selectedRows: [],
      selectedRowKeys: [],

      localLoading: false,
      localDataSource: [],
      localPagination: _extends({}, this.pagination),

      toolBarSettingsCheck: false
    };
  },

  watch: {
    pageNo: function pageNo(val) {
      _extends(this.localPagination, {
        current: val
      });
    },
    pageSize: function pageSize(val) {
      _extends(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 = 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(
            Space,
            {
              attrs: { size: 16 }
            },
            [$slots.toolExtra ? $slots.toolExtra : null, showRefresh ? h(
              Tooltip,
              {
                attrs: { title: '\u5237\u65B0', placement: 'top' }
              },
              [h(
                'div',
                { 'class': prefixCls + '-toolbar-setting-item rotate-90', on: {
                    'click': this.onToolBarRefresh
                  }
                },
                [h(IepIcon, {
                  attrs: { type: 'basic_linear_button_redo', spin: localLoading }
                })]
              )]
            ) : null, showSettings ? h(
              Tooltip,
              {
                attrs: { title: '\u5217\u8BBE\u7F6E', placement: 'top' }
              },
              [h(
                Dropdown,
                {
                  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(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(
                        Checkbox,
                        {
                          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(porTableTypes).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] = _extends({}, _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',
        _mergeJSXProps([{ props: props, scopedSlots: _extends({}, 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(Base);
  Vue.component(ProTable.name, ProTable);
};
export default ProTable;