iep-ui/es/iep-tab-tree-select/TreeSelectInput.js

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

import PropTypes from '../_util/vue-types';
import { IepIcon } from 'rk-web-icon';
import Tag from '../tag';
import { isEmpty } from 'lodash';

export default {
  name: 'TreeSelectInput',
  props: {
    prefix: PropTypes.string,
    active: PropTypes.bool,
    placeholder: PropTypes.string,
    select: PropTypes.array
  },
  data: function data() {
    return {
      _localSelect: []
    };
  },

  watch: {
    '$props.select': {
      handler: function handler(e) {
        this._localSelect = e;
      },

      immediate: true,
      deep: true
    }
  },
  methods: {
    handleClose: function handleClose(e) {
      this.$emit('close', e);
    }
  },
  render: function render() {
    var _this = this;

    var h = arguments[0];
    var _$props = this.$props,
        prefix = _$props.prefix,
        placeholder = _$props.placeholder,
        active = _$props.active;

    var prefixCls = prefix + '-input';
    var InputNodes = !isEmpty(this._localSelect.flat()) ? this._localSelect.flat().map(function (item) {
      return h(
        Tag,
        {
          attrs: { closable: true, visible: true },
          on: {
            'close': function close() {
              return _this.handleClose(item);
            }
          }
        },
        [item.title]
      );
    }) : h('span', [placeholder]);
    return h(
      'div',
      { 'class': prefixCls },
      [h(
        'div',
        {
          'class': [prefixCls + '-box', isEmpty(this._localSelect.flat()) ? prefixCls + '-box-placeholder' : '', active ? prefixCls + '-box-active' : '']
        },
        [InputNodes]
      ), h(
        'div',
        { 'class': prefixCls + '-suffix' },
        [h(IepIcon, {
          attrs: { type: 'basic_linear_directive_down4' }
        })]
      )]
    );
  }
};