iep-ui/lib/iep-sundry-transfer/IepSundryTransfer.js

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

'use strict';

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

var _vueTypes = require('../_util/vue-types');

var _vueTypes2 = _interopRequireDefault(_vueTypes);

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

var _scrollbar = require('../scrollbar');

var _scrollbar2 = _interopRequireDefault(_scrollbar);

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

var _checkbox2 = _interopRequireDefault(_checkbox);

var _input = require('../input');

var _input2 = _interopRequireDefault(_input);

var _lodash = require('lodash');

var _empty = require('../empty');

var _empty2 = _interopRequireDefault(_empty);

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

exports['default'] = {
  name: 'IepSundryTransfer',
  model: {
    prop: 'value',
    event: 'change'
  },
  props: {
    value: _vueTypes2['default'].value,
    dataSource: _vueTypes2['default'].array,
    title: _vueTypes2['default'].string.def('请选择'),
    placeholder: _vueTypes2['default'].string.def('请输入')
  },
  inject: {
    configProvider: { 'default': function _default() {
        return _configConsumerProps.ConfigConsumerProps;
      } }
  },
  data: function data() {
    return {
      localSelectKeys: [],
      tempSelectKeys: [],
      localDataSource: [],
      targetDataSource: [],
      isAllChecked: false,
      localSearchContent: undefined
    };
  },

  watch: {
    dataSource: {
      handler: function handler(e) {
        this.localDataSource = (0, _lodash.cloneDeep)(e);
      },

      immediate: true
    },
    value: {
      handler: function handler(e) {
        this.localSelectKeys = e;
        this.listenTarget();
      },

      immediate: true,
      deep: true
    }
  },
  methods: {
    listenTarget: function listenTarget() {
      var _this = this;

      if (!(0, _lodash.isEmpty)(this.localSelectKeys)) {
        this.targetDataSource = this.$props.dataSource.filter(function (item) {
          return _this.localSelectKeys.includes(item.key);
        });
      } else {
        this.targetDataSource = [];
      }
      this.isAllChecked = this.targetDataSource.length === this.$props.dataSource.length;
    },
    handleChange: function handleChange(e) {
      this.tempSelectKeys = e;
      this.localSelectKeys = e;
      this.isAllChecked = this.localSelectKeys.length === this.$props.dataSource.length;
      this.listenTarget();
      this.$emit('change', this.localSelectKeys);
    },
    handleAllChecked: function handleAllChecked() {
      this.isAllChecked = !this.isAllChecked;
      this.localSelectKeys = this.isAllChecked ? this.$props.dataSource.map(function (item) {
        return item.key;
      }) : [];
      this.listenTarget();
      this.$emit('change', this.localSelectKeys);
    },
    handleInputChange: function handleInputChange(e) {
      var value = e.target.value;

      var data = (0, _lodash.cloneDeep)(this.dataSource);
      this.localSearchContent = value;
      if (!(0, _lodash.isEmpty)(value)) {
        this.localDataSource = data.filter(function (item) {
          return item.title.includes(value);
        });
      } else {
        this.localDataSource = data;
      }
    },
    handleClear: function handleClear(e) {
      var selectKeysIndex = this.localSelectKeys.findIndex(function (item) {
        return item === e.key;
      });
      if (selectKeysIndex > -1) {
        this.localSelectKeys.splice(selectKeysIndex, 1);
      }
      var targetIndex = this.targetDataSource.findIndex(function (item) {
        return item.key === e.key;
      });
      if (targetIndex > -1) {
        this.targetDataSource.splice(targetIndex, 1);
      }
      this.listenTarget();
      this.$emit('change', this.localSelectKeys);
    }
  },

  render: function render() {
    var _this2 = this;

    var h = arguments[0];
    var customizePrefixCls = this.prefixCls,
        $props = this.$props,
        localSelectKeys = this.localSelectKeys,
        isAllChecked = this.isAllChecked,
        localDataSource = this.localDataSource,
        localSearchContent = this.localSearchContent,
        targetDataSource = this.targetDataSource;


    var getPrefixCls = this.configProvider.getPrefixCls;
    var prefixCls = getPrefixCls('iep-sundry-transfer', customizePrefixCls);
    var title = $props.title,
        placeholder = $props.placeholder,
        dataSource = $props.dataSource;


    var checkboxVNodes = localDataSource.map(function (item) {
      return h(
        'div',
        { 'class': prefixCls + '-footer-item-footer-item' },
        [h(
          _checkbox2['default'],
          {
            attrs: { value: item.key }
          },
          [item.title]
        )]
      );
    });

    var targetVNodes = !(0, _lodash.isEmpty)(targetDataSource) ? targetDataSource.map(function (item) {
      return h(
        'div',
        { 'class': prefixCls + '-select-item' },
        [h(
          'div',
          { 'class': prefixCls + '-select-item-text' },
          [item.title]
        ), h(
          'div',
          { 'class': prefixCls + '-select-item-btn', on: {
              'click': function click() {
                return _this2.handleClear(item);
              }
            }
          },
          [h('a-iep-icon', {
            attrs: { type: 'basic_linear_button_close', color: '#CCCCCC', 'font-size': 20 }
          })]
        )]
      );
    }) : h(_empty2['default']);

    return h(
      'div',
      { 'class': prefixCls },
      [h(
        'div',
        { 'class': prefixCls + '-header' },
        [h(
          'div',
          { 'class': prefixCls + '-header-text' },
          [h(
            _checkbox2['default'],
            {
              attrs: { checked: isAllChecked },
              on: {
                'change': function change() {
                  return _this2.handleAllChecked();
                }
              }
            },
            [title]
          )]
        ), h(
          'div',
          { 'class': prefixCls + '-header-tag' },
          [localSelectKeys.length, '/', dataSource.length]
        )]
      ), h(
        'div',
        { 'class': prefixCls + '-footer' },
        [h(
          'div',
          { 'class': prefixCls + '-footer-item' },
          [h(
            'div',
            { 'class': prefixCls + '-footer-item-header' },
            [h(_input2['default'].Search, {
              attrs: { placeholder: placeholder, value: localSearchContent
              },
              on: {
                'change': function change(e) {
                  return _this2.handleInputChange(e);
                }
              }
            })]
          ), h(
            'div',
            { 'class': prefixCls + '-footer-item-footer' },
            [h(_scrollbar2['default'], [h(
              _checkbox2['default'].Group,
              {
                attrs: { value: localSelectKeys },
                on: {
                  'change': function change(e) {
                    return _this2.handleChange(e);
                  }
                }
              },
              [h(
                'div',
                { 'class': prefixCls + '-footer-item-footer-inner' },
                [checkboxVNodes]
              )]
            )])]
          )]
        ), h(
          'div',
          { 'class': prefixCls + '-footer-item' },
          [h(
            'div',
            { 'class': [prefixCls + '-footer-item-header', prefixCls + '-footer-item-header-text'] },
            ['\u5DF2\u9009\u62E9', localSelectKeys.length, '\u6761']
          ), h(
            'div',
            { 'class': prefixCls + '-footer-item-footer' },
            [h(_scrollbar2['default'], [h(
              'div',
              {
                'class': [prefixCls + '-footer-item-footer-inner', (0, _lodash.isEmpty)(targetDataSource) ? prefixCls + '-footer-item-footer-inner-empty' : ''] },
              [targetVNodes]
            )])]
          )]
        )]
      )]
    );
  }
};