vue-ant-patterns/lib/d-table/table.js

vue-ant-patterns

'use strict';

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

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

var _babelHelperVueJsxMergeProps2 = _interopRequireDefault(_babelHelperVueJsxMergeProps);

var _defineProperty2 = require('babel-runtime/helpers/defineProperty');

var _defineProperty3 = _interopRequireDefault(_defineProperty2);

var _objectWithoutProperties2 = require('babel-runtime/helpers/objectWithoutProperties');

var _objectWithoutProperties3 = _interopRequireDefault(_objectWithoutProperties2);

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

var _extends3 = _interopRequireDefault(_extends2);

var _classnames = require('classnames');

var _classnames2 = _interopRequireDefault(_classnames);

var _antDesignVue = require('ant-design-vue');

var _propsUtil = require('ant-design-vue/lib/_util/props-util');

var _vueTypes = require('ant-design-vue/lib/_util/vue-types');

var _vueTypes2 = _interopRequireDefault(_vueTypes);

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

var DTable = {
  name: 'DTable',
  DColumn: _antDesignVue.Table.Column, // 列描述数据对象
  DColumnGroup: _antDesignVue.Table.ColumnGroup,
  props: (0, _extends3['default'])({}, _antDesignVue.Table.props, {
    size: _vueTypes2['default'].string.def('small'),
    /**
     * 是否是斑马线显示表格
     */
    tableStriped: _vueTypes2['default'].bool.def(false),
    /**
     * 是否隐藏多选后表格上方出现选中项的详细信息，默认显示
     */
    hideSelectedAlert: _vueTypes2['default'].bool.def(false),
    /**
     * 用于查看选中项显示的标签名字，如果不传，默认从 columns 前往后取非操作的第一列名显示
     */
    rowTitle: _vueTypes2['default'].string.def('')
  }),
  data: function data() {
    return {
      selectedRows: [],
      selectedRowKeys: [],
      selectedAllRows: [],
      selectedAllRowKeys: [],
      hideAlert: this.$props.hideSelectedAlert || false,
      showTags: false
    };
  },

  watch: {
    rowSelection: function rowSelection(newVal, oldVal) {
      // 清空选择，父组件传递进来的selectedRowKeys为空
      if (newVal.selectedRowKeys.length === 0) {
        this.selectedAllRowKeys = [];
        this.selectedAllRows = [];
        this.selectedRows = [];
        this.selectedRowKeys = [];
      }
    }
  },
  methods: {
    normalize: function normalize() {
      var _this = this;

      var elements = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];

      var columns = [];
      elements.forEach(function (element) {
        if (!element.tag) {
          return;
        }
        var key = (0, _propsUtil.getKey)(element);
        var style = (0, _propsUtil.getStyle)(element);
        var cls = (0, _propsUtil.getClass)(element);
        var props = (0, _propsUtil.getOptionProps)(element);
        var events = (0, _propsUtil.getEvents)(element);
        var listeners = {};
        Object.keys(events).forEach(function (e) {
          var k = 'on-' + e;
          listeners[(0, _propsUtil.camelize)(k)] = events[e];
        });

        var _getSlots = (0, _propsUtil.getSlots)(element),
            children = _getSlots['default'],
            restSlots = (0, _objectWithoutProperties3['default'])(_getSlots, ['default']);

        var column = (0, _extends3['default'])({}, restSlots, props, { style: style, 'class': cls }, listeners);
        if (key) {
          column.key = key;
        }
        if ((0, _propsUtil.getSlotOptions)(element).__ANT_TABLE_COLUMN_GROUP) {
          column.children = _this.normalize(typeof children === 'function' ? children() : children);
        } else {
          var customRender = element.data && element.data.scopedSlots && element.data.scopedSlots['default'];
          column.customRender = column.customRender || customRender;
        }
        columns.push(column);
      });
      return columns;
    },
    updateColumns: function updateColumns() {
      var _this2 = this;

      var cols = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];

      var columns = [];
      var $slots = this.$slots,
          $scopedSlots = this.$scopedSlots;

      cols.forEach(function (col) {
        var _col$slots = col.slots,
            slots = _col$slots === undefined ? {} : _col$slots,
            _col$scopedSlots = col.scopedSlots,
            scopedSlots = _col$scopedSlots === undefined ? {} : _col$scopedSlots,
            restProps = (0, _objectWithoutProperties3['default'])(col, ['slots', 'scopedSlots']);

        var column = (0, _extends3['default'])({}, restProps);
        Object.keys(slots).forEach(function (key) {
          var name = slots[key];
          if (column[key] === undefined && $slots[name]) {
            column[key] = $slots[name].length === 1 ? $slots[name][0] : $slots[name];
          }
        });
        Object.keys(scopedSlots).forEach(function (key) {
          var name = scopedSlots[key];
          if (column[key] === undefined && $scopedSlots[name]) {
            column[key] = $scopedSlots[name];
          }
        });
        // if (slotScopeName && $scopedSlots[slotScopeName]) {
        //   column.customRender = column.customRender || $scopedSlots[slotScopeName]
        // }
        if (col.children) {
          column.children = _this2.updateColumns(column.children);
        }
        columns.push(column);
      });
      return columns;
    },

    // 渲染选中标签
    renderSelectItem: function renderSelectItem(sItem) {
      var _this3 = this;

      var h = this.$createElement;

      var cols = this.$props.columns;
      var showName = '';
      if (this.rowTitle !== '') {
        showName = sItem[this.rowTitle];
      } else {
        cols.some(function (item, index) {
          var name = item.dataIndex;
          if (sItem[name]) {
            showName = sItem[name];
            return true;
          }
        });
      }
      return h(
        'a-col',
        { 'class': 'margin-bottom-xs' },
        [h(
          'a-tag',
          {
            attrs: {
              closable: true,
              color: '#FBE9C5'
            },
            on: {
              'close': function close(e) {
                e.preventDefault();
                _this3.operationSelect(false, [sItem]);
              },
              'click': function click(e) {
                e.preventDefault();
                _this3.operationSelect(false, [sItem]);
              }
            }
          },
          [showName]
        )]
      );
    },

    /**
     * 用于更新已选中的列表数据 total 统计
     * @param selectedRowKeys
     * @param selectedRows
     */
    updateSelect: function updateSelect(selectedRowKeys, selectedRows) {
      if (selectedRowKeys.length !== selectedRows.length) {
        // 有翻页
        this.selectedRows = this.selectedAllRows.concat(selectedRows);
      } else {
        this.selectedRows = selectedRows;
      }
      this.selectedRowKeys = selectedRowKeys;
    },

    /**
     * 清空 table 已选中项
     */
    clearSelected: function clearSelected() {
      if (this.rowSelection) {
        this.operationSelect(false, this.selectedAllRows);
      }
    },
    getRecordKey: function getRecordKey(record, index) {
      var rowKey = this.$props.rowKey;

      var recordKey = typeof rowKey === 'function' ? rowKey(record, index) : record[rowKey];
      return recordKey === undefined ? index : recordKey;
    },

    /**
     * 自定义选择操作
     * @param {Boolean} selected
     * @param {Array} changeRows
     */
    operationSelect: function operationSelect(selected, changeRows) {
      var _this4 = this;

      if (selected) {
        if (this.rowSelection.type === 'radio') {
          this.selectedAllRows = changeRows;
        } else {
          this.selectedAllRows = this.selectedAllRows.concat(changeRows);
        }
      } else {
        this.selectedAllRows = this.selectedAllRows.filter(function (_sItem) {
          var changeRowsKey = changeRows.map(function (_cItem) {
            return _this4.getRecordKey(_cItem);
          });
          return !changeRowsKey.includes(_this4.getRecordKey(_sItem));
        });
      }
      this.selectedAllRowKeys = this.selectedAllRows.map(function (_item) {
        return _this4.getRecordKey(_item);
      });
      this.selectedRows = this.selectedAllRows;
      this.selectedRowKeys = this.selectedAllRowKeys;
      // typeof this.rowSelection.onSelectTotal !== 'undefined' &&
      // this.rowSelection.onSelectTotal(this.selectedAllRowKeys, this.selectedAllRows, selected, changeRows);
    },
    formatRowSelection: function formatRowSelection(rowSelection) {
      var _this5 = this;

      if (rowSelection) {
        var newRowSelection = (0, _extends3['default'])({}, rowSelection, {
          selectedRows: this.selectedRows,
          selectedRowKeys: this.selectedRowKeys,
          onChange: function onChange(selectedRowKeys, selectedRows) {
            _this5.updateSelect(selectedRowKeys, selectedRows);
            typeof _this5.rowSelection.onChange !== 'undefined' && _this5.rowSelection.onChange(_this5.selectedRowKeys, _this5.selectedRows);
          },
          onSelect: function onSelect(record, selected, selectedRows) {
            _this5.operationSelect(selected, [record]);
            typeof _this5.rowSelection.onSelect !== 'undefined' && _this5.rowSelection.onSelect(record, selected, _this5.selectedRows);
          },
          onSelectAll: function onSelectAll(selected, selectedRows, changeRows) {
            _this5.operationSelect(selected, changeRows);
            typeof _this5.rowSelection.onSelectAll !== 'undefined' && _this5.rowSelection.onSelectAll(selected, _this5.selectedRows, changeRows);
          }
        });
        return newRowSelection;
      } else {
        return null;
      }
    }
  },
  render: function render() {
    var _cx,
        _this6 = this;

    var h = arguments[0];
    var $slots = this.$slots,
        $scopedSlots = this.$scopedSlots,
        $attrs = this.$attrs,
        $listeners = this.$listeners,
        $props = this.$props,
        size = this.size,
        tableStriped = this.tableStriped;

    var rowSelection = this.formatRowSelection(this.$props.rowSelection);
    if (rowSelection && rowSelection.type === 'radio') {
      this.hideAlert = true; // 单选不显示
    }
    var columns = $props.columns ? this.updateColumns($props.columns) : this.normalize($slots['default']);
    var wrapProps = {
      'class': (0, _classnames2['default'])((_cx = {}, (0, _defineProperty3['default'])(_cx, 'depot-dTable', 1), (0, _defineProperty3['default'])(_cx, 'depot-dTable-striped', tableStriped), _cx)),
      attrs: (0, _extends3['default'])({}, $attrs),
      props: (0, _extends3['default'])({}, $props, this.$scopedSlots, {
        rowSelection: rowSelection,
        size: size,
        columns: columns
      }),
      on: (0, _extends3['default'])({}, $listeners),
      ref: 'DTable'
    };
    return h(
      'd-container-v',
      (0, _babelHelperVueJsxMergeProps2['default'])([{ props: { grow: true } }, { 'class': 'depot-layout-temptable' }]),
      [!this.hideAlert && this.selectedAllRowKeys.length > 0 ? h(
        'd-container-v',
        { 'class': 'depot-layout-temptable-showSelect', ref: 'DTable-SelectTagsBox' },
        [this.showTags ? h('d-container-h', [h(
          'a-row',
          {
            attrs: { type: 'flex' }
          },
          [this.selectedAllRows.map(function (_sItem) {
            return _this6.renderSelectItem(_sItem);
          })]
        )]) : '', h(
          'd-tools',
          { style: 'margin-bottom:0px' },
          [h(
            'div',
            { slot: 'main' },
            [this.selectedAllRows.length, ' \u6761\u9009\u4E2D\u8BB0\u5F55', h(
              'a-button',
              {
                attrs: {
                  type: 'link',
                  size: 'small'
                },
                on: {
                  'click': function click() {
                    _this6.showTags = !_this6.showTags;
                  }
                }
              },
              [this.showTags ? '收起' : '展开']
            )]
          ), h(
            'div',
            { slot: 'second' },
            [h(
              'a-button',
              {
                attrs: { type: 'primary', size: 'small' },
                on: {
                  'click': this.clearSelected
                }
              },
              ['\u6E05\u9664\u6240\u6709\u9009\u4E2D\u8BB0\u5F55']
            )]
          )]
        )]
      ) : '', h(
        _antDesignVue.Table,
        wrapProps,
        [Object.keys(this.$slots).map(function (name) {
          return h(
            'template',
            { slot: name },
            [_this6.$slots[name]]
          );
        })]
      )]
    );
  }
};

exports['default'] = DTable;