iep-ui/es/select-tips-box/SelectTipsBox.js

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

import PropTypes from '../_util/vue-types';
import classNames from 'classnames';
import { initDefaultProps, filterEmpty, getComponentFromProp, getListeners } from '../_util/props-util';
import { ConfigConsumerProps } from '../config-provider/configConsumerProps';

export default {
  name: 'IepSelectTipsBox',
  props: {
    showZero: PropTypes.bool,
    num: PropTypes.number.def(function () {
      return 0;
    }),
    totalNum: PropTypes.number.def(function () {
      return 0;
    }),
    hasSelect: PropTypes.bool.def(false)
  },
  data: function data() {
    return {
      selectAll: this.$props.totalNum === this.$props.num
    };
  },

  inject: {
    configProvider: { 'default': function _default() {
        return ConfigConsumerProps;
      } }
  },
  watch: {
    num: function num() {
      this.selectAll = this.$props.totalNum === this.$props.num;
    }
  },
  methods: {
    onClose: function onClose() {
      this.$emit('close');
    },
    onDel: function onDel() {
      this.$emit('del');
    },
    onSelectAll: function onSelectAll(e) {
      this.selectAll = e.target.checked;
      this.$emit('onSelectAll', this.selectAll);
    }
  },
  render: function render() {
    var h = arguments[0];
    var customizePrefixCls = this.prefixCls,
        $slots = this.$slots;


    var getPrefixCls = this.configProvider.getPrefixCls;
    var prefixCls = getPrefixCls('select-tips-box', customizePrefixCls);

    return h(
      'div',
      { 'class': prefixCls },
      [h(
        'div',
        { 'class': prefixCls + '-content' },
        [this.$props.num > 0 ? h(
          'div',
          { 'class': prefixCls + '-wrap' },
          [h(
            'div',
            { 'class': prefixCls + '-left' },
            [this.$props.hasSelect ? h(
              'div',
              { 'class': prefixCls + '-select' },
              [h(
                'a-checkbox',
                {
                  attrs: { checked: this.selectAll },
                  on: {
                    'change': this.onSelectAll
                  }
                },
                ['\u5168\u9009']
              )]
            ) : '', h(
              'div',
              { 'class': prefixCls + '-num' },
              ['\u5DF2\u9009\u62E9 ', this.$props.num, ' \u9879']
            )]
          ), h(
            'div',
            { 'class': prefixCls + '-right', on: {
                'click': this.onClose
              }
            },
            ['\u53D6\u6D88\u9009\u62E9']
          )]
        ) : '', h(
          'div',
          { 'class': prefixCls + '-main' },
          [$slots.content]
        )]
      ), this.$props.num > 0 ? h(
        'div',
        { 'class': prefixCls + '-bottom' },
        [h(
          'a-button',
          {
            attrs: { type: 'primary' },
            on: {
              'click': this.onClose
            }
          },
          ['\u6279\u91CF\u5173\u95ED']
        ), h(
          'a-button',
          {
            attrs: { type: 'primary' },
            on: {
              'click': this.onDel
            }
          },
          ['\u6279\u91CF\u5220\u9664']
        )]
      ) : '']
    );
  }
};