iep-ui/es/iep-business-area/BusinessArea.js

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

import PropTypes from '../_util/vue-types';
import { isEmpty } from 'lodash';
import { ConfigConsumerProps } from '../config-provider/configConsumerProps';
import Dropdown from '../dropdown';
import Tree from '../tree';
import Tabs from '../tabs';
import TabPane from '../vc-tabs/src/TabPane';
import Input from '../input';
import { IepIcon } from 'rk-web-icon';
// import InputSearch from '../input/Search';
import Scrollbar from '../scrollbar';

export default {
  name: 'IepBusinessArea',
  props: {
    replaceFields: PropTypes.object,
    data: PropTypes.array
  },
  inject: {
    configProvider: { 'default': function _default() {
        return 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 = !isEmpty(replaceFields) ? replaceFields.key : 'key';
      var title = !isEmpty(replaceFields) ? replaceFields.title : 'title';
      var list = this.findParent(data[this.activeKey].data, selectedKeys[0], key);
      this.selectedKeys = selectedKeys;
      this.title = !isEmpty(list) ? list[0][title] : undefined;
      this.$emit('change', {
        selectedKeys: selectedKeys,
        nodes: !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 = !isEmpty(data) ? data.map(function (item, index) {
      return h(
        TabPane,
        { key: index, attrs: { tab: item.title }
        },
        [h(
          'div',
          { 'class': prefixCls + '-tabs' },
          [h(
            'div',
            { 'class': prefixCls + '-tabs' },
            [h(
              Scrollbar,
              { 'class': prefixCls + '-scrollbar' },
              [h(Tree, {
                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(
        Dropdown,
        dropdownProps,
        [h(
          Input,
          inputProps,
          [h(IepIcon, { slot: 'suffix', attrs: { type: 'basic_linear_directive_down4' }
          })]
        ), h(
          'div',
          { 'class': prefixCls + '-wrapper', slot: 'overlay' },
          [h(
            Tabs,
            {
              on: {
                'change': function change(e) {
                  return handleTabsChange(e);
                }
              }
            },
            [tabVNodes]
          )]
        )]
      )]
    );
  }
};