iep-ui/lib/iep-business-area/BusinessArea.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 _lodash = require('lodash');

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

var _dropdown = require('../dropdown');

var _dropdown2 = _interopRequireDefault(_dropdown);

var _tree = require('../tree');

var _tree2 = _interopRequireDefault(_tree);

var _tabs = require('../tabs');

var _tabs2 = _interopRequireDefault(_tabs);

var _TabPane = require('../vc-tabs/src/TabPane');

var _TabPane2 = _interopRequireDefault(_TabPane);

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

var _input2 = _interopRequireDefault(_input);

var _rkWebIcon = require('rk-web-icon');

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

var _scrollbar2 = _interopRequireDefault(_scrollbar);

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

exports['default'] = {
  name: 'IepBusinessArea',
  props: {
    replaceFields: _vueTypes2['default'].object,
    data: _vueTypes2['default'].array
  },
  inject: {
    configProvider: { 'default': function _default() {
        return _configConsumerProps.ConfigConsumerProps;
      } }
  },
  data: function data() {
    return {
      visible: false,
      tabsDisabled: false,
      activeKey: 0,
      title: undefined,
      selectedKeys: []
    };
  },

  methods: {
    findParent: function findParent(arr, id, key) {
      var temp = [];
      var callback = function callback(nowArr, id) {
        for (var i = 0; i < nowArr.length; i++) {
          var item = nowArr[i];
          if (item[key] === id) {
            temp.push(item);
            callback(arr, item.parentId);
            break;
          } else {
            if (item.children) {
              callback(item.children, id);
            }
          }
        }
      };
      callback(arr, id);
      return temp;
    },
    handleDropdown: function handleDropdown(e) {
      this.visible = e;
    },
    handleTabsChange: function handleTabsChange(e) {
      this.activeKey = e;
      this.title = undefined;
      this.selectedKeys = [];
    },
    handleTreeChange: function handleTreeChange(selectedKeys) {
      var _$props = this.$props,
          replaceFields = _$props.replaceFields,
          data = _$props.data;

      var key = !(0, _lodash.isEmpty)(replaceFields) ? replaceFields.key : 'key';
      var title = !(0, _lodash.isEmpty)(replaceFields) ? replaceFields.title : 'title';
      var list = this.findParent(data[this.activeKey].data, selectedKeys[0], key);
      this.selectedKeys = selectedKeys;
      this.title = !(0, _lodash.isEmpty)(list) ? list[0][title] : undefined;
      this.$emit('change', {
        selectedKeys: selectedKeys,
        nodes: !(0, _lodash.isEmpty)(list) ? list[0] : {}
      });
      this.visible = false;
    }
  },

  render: function render() {
    var h = arguments[0];
    var customizePrefixCls = this.prefixCls,
        visible = this.visible,
        handleDropdown = this.handleDropdown,
        data = this.data,
        replaceFields = this.replaceFields,
        handleTabsChange = this.handleTabsChange,
        selectedKeys = this.selectedKeys,
        handleTreeChange = this.handleTreeChange,
        title = this.title;


    var getPrefixCls = this.configProvider.getPrefixCls;
    var prefixCls = getPrefixCls('business-area', customizePrefixCls);

    var inputProps = {
      props: {
        placeholder: '请选择',
        readOnly: true,
        value: title
      }
    };

    var dropdownProps = {
      props: {
        trigger: ['click'],
        visible: visible
      },
      on: {
        visibleChange: function visibleChange(e) {
          return handleDropdown(e);
        }
      }
    };
    var tabVNodes = !(0, _lodash.isEmpty)(data) ? data.map(function (item, index) {
      return h(
        _TabPane2['default'],
        { key: index, attrs: { tab: item.title }
        },
        [h(
          'div',
          { 'class': prefixCls + '-tabs' },
          [h(
            'div',
            { 'class': prefixCls + '-tabs' },
            [h(
              _scrollbar2['default'],
              { 'class': prefixCls + '-scrollbar' },
              [h(_tree2['default'], {
                attrs: {
                  selectedKeys: selectedKeys,
                  'replace-fields': replaceFields,
                  'tree-data': item.data,
                  blockNode: true
                },
                on: {
                  'select': function select(selectedKeys, e) {
                    return handleTreeChange(selectedKeys, e);
                  }
                }
              })]
            )]
          )]
        )]
      );
    }) : null;

    return h(
      'div',
      { 'class': prefixCls },
      [h(
        _dropdown2['default'],
        dropdownProps,
        [h(
          _input2['default'],
          inputProps,
          [h(_rkWebIcon.IepIcon, { slot: 'suffix', attrs: { type: 'basic_linear_directive_down4' }
          })]
        ), h(
          'div',
          { 'class': prefixCls + '-wrapper', slot: 'overlay' },
          [h(
            _tabs2['default'],
            {
              on: {
                'change': function change(e) {
                  return handleTabsChange(e);
                }
              }
            },
            [tabVNodes]
          )]
        )]
      )]
    );
  }
};
// import InputSearch from '../input/Search';