vue-ant-patterns/biz-lib/b-tree/treeHeader.js

vue-ant-patterns

'use strict';

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

var _extends2 = require('babel-runtime/helpers/extends');

var _extends3 = _interopRequireDefault(_extends2);

var _dContainer = require('../../lib/d-container');

var _dContainer2 = _interopRequireDefault(_dContainer);

var _antDesignVue = require('ant-design-vue');

var _vueTypes = require('ant-design-vue/lib/_util/vue-types');

var _vueTypes2 = _interopRequireDefault(_vueTypes);

var _propsUtil = require('ant-design-vue/lib/_util/props-util');

var _utils = require('../../lib/_utils');

var _extend = require('extend');

var _extend2 = _interopRequireDefault(_extend);

var _moment = require('moment');

var _moment2 = _interopRequireDefault(_moment);

var _LocaleReceiver = require('ant-design-vue/lib/locale-provider/LocaleReceiver');

var _LocaleReceiver2 = _interopRequireDefault(_LocaleReceiver);

var _request = require('../_biz-utils/request');

var _request2 = _interopRequireDefault(_request);

var _en_US = require('./locale/en_US');

var _en_US2 = _interopRequireDefault(_en_US);

var _zh_CN = require('./locale/zh_CN');

var _zh_CN2 = _interopRequireDefault(_zh_CN);

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

var Horizontal = _dContainer2['default'].Horizontal,
    Vertical = _dContainer2['default'].Vertical;

// const { RangePicker } = DatePicker;

var Option = _antDesignVue.Select.Option;
var AutoCompleteOption = _antDesignVue.AutoComplete.Option;
var InputSearch = _antDesignVue.Input.Search;


var langType = {
  'zh-cn': _zh_CN2['default'],
  'en-us': _en_US2['default']
};

// const dateDefault = {
//   type: 'dataPicker',
//   value: 'now',
//   format: 'YYYY/MM/DD',
// };

exports['default'] = {
  name: 'BTreeHeader',
  props: {
    // 树节点父子关系关联字段
    rel: _vueTypes2['default'].array.def([['data', 'hid'], ['data', 'parentHid']]),
    // 树节点, 显示字段
    renderKey: _vueTypes2['default'].oneOfType([_vueTypes2['default'].string, _vueTypes2['default'].array]).def(['data', 'name']),
    // 维度
    dimensionOptions: _vueTypes2['default'].object,
    // 搜索
    searchOptions: _vueTypes2['default'].object,
    // 搜索选择后的查询参数
    searchSelectOptions: _vueTypes2['default'].object,
    // 时间戳
    queryDate: _vueTypes2['default'].number,
    dimensionDisabled: Boolean,
    treeFilter: Boolean
  },
  searchCache: {},
  created: function created() {
    var _this = this;

    var _$props = this.$props,
        dimensionOptions = _$props.dimensionOptions,
        searchOptions = _$props.searchOptions,
        treeFilter = _$props.treeFilter;
    /**
     * 判断是否传入维度 prop, 如果传入则查询维度下拉菜单的数据
     * 查询完成后, 触发父级 dimensionLoad 事件
     */

    if (dimensionOptions) {
      var vDimensionValue = dimensionOptions.defaultValue,
          keyName = dimensionOptions.keyName;

      this.getDimension().then(function (res) {
        var data = res.data;
        var code = data.code,
            msg = data.msg,
            resData = data.data;

        if (code === 200) {
          _this.dimensionData = resData;
          _this.dimensionValue = vDimensionValue || (resData[0] || {})[keyName];
          _this.$emit('dimensionLoad', resData);
        } else {
          _this.$message.error(msg);
        }
        return res;
      })['finally'](function () {
        _this.$root.isLoading = false;
      });
    }
    this.searchDelayHandler = function () {};
    // if (searchOptions) {
    this.searchFetch = (0, _utils.debounceHandler)(this.searchFetch);
    // }
    // if (treeFilter) {
    this.treeFilterDebounceHandler = (0, _utils.debounceHandler)(this.treeFilterHandler);
    // }
  },
  data: function data() {
    return {
      localeCode: 'zh-cn',
      searchResult: [],
      // select 搜索框的默认值如果是空字符串, 失去焦点时, placeholder 不能正常显示
      // 参考官方文档使用[]
      searchVal: [],
      fetching: false,
      // 维度列表
      dimensionData: [],
      // 维度默认选中
      dimensionValue: ''
    };
  },

  methods: {
    /**
     * 获取默认语言
     */
    getDefaultLocale: function getDefaultLocale() {
      var result = {
        lang: (0, _extends3['default'])({}, _zh_CN2['default'])
      };
      return result;
    },

    /**
     * 获取维度列表
     */
    getDimension: function getDimension() {
      var dimensionOptions = this.$props.dimensionOptions;
      var vDimensionValue = dimensionOptions.defaultValue,
          url = dimensionOptions.url,
          method = dimensionOptions.method,
          data = dimensionOptions.data;

      this.dimensionValue = vDimensionValue;
      this.$root.isLoading = true;
      var reqParams = {
        url: url,
        method: method,
        data: data
      };
      return (0, _request2['default'])(reqParams);
    },

    /**
     * 搜索
     * 根据输入关键词搜索查询结果
     * 并在下拉列表中显示
     * @param { String } val
     */
    searchFetch: function searchFetch(val) {
      var _this2 = this;

      if (!val) return;
      var _$props2 = this.$props,
          searchOptions = _$props2.searchOptions,
          queryDate = _$props2.queryDate,
          rel = _$props2.rel,
          renderKey = _$props2.renderKey;
      var keyName = searchOptions.keyName,
          showName = searchOptions.showName,
          url = searchOptions.url,
          method = searchOptions.method,
          data = searchOptions.data;
      var dimensionValue = this.dimensionValue;

      var searchQueryParam = {
        url: url,
        method: method,
        data: (0, _extends3['default'])({
          viewInvalid: false
        }, data, {
          // 关键词
          dimHid: dimensionValue,
          date: queryDate,
          nameStr: val
        })
      };
      this.fetching = true;
      (0, _request2['default'])(searchQueryParam).then(function (res) {
        var resData = res.data;
        var code = resData.code,
            msg = resData.msg,
            data = resData.data;

        if (code !== 200) {
          return Promise.reject(msg);
        }
        var tmpData = data.map(function (it) {
          var k = (0, _utils.relationHandler)(rel[0], it);
          // const pk = relationHandler(rel[1], it);
          var n = (0, _utils.relationHandler)(renderKey, it);
          _this2.$options.searchCache[k] = it;
          return {
            hid: k,
            name: n
            // parentHid: pk,
          };
        });
        _this2.searchResult = tmpData;
        _this2.$emit('search', { data: resData });
      })['catch'](function (e) {
        console.error(e);
        _this2.$message.error(e);
      })['finally'](function () {
        _this2.fetching = false;
      });
    },
    treeFilterHandler: function treeFilterHandler(e) {
      // console.log(e);
      this.$emit('treeFilter', e);
    },

    /**
     * 渲染维度下拉菜单
     */
    renderDimension: function renderDimension() {
      var _this3 = this;

      var h = this.$createElement;
      var _$props3 = this.$props,
          dimensionOptions = _$props3.dimensionOptions,
          dimensionDisabled = _$props3.dimensionDisabled;

      if (!dimensionOptions) return null;

      var dimensionData = this.dimensionData,
          localeCode = this.localeCode;
      var defaultValue = dimensionOptions.defaultValue,
          showName = dimensionOptions.showName,
          keyName = dimensionOptions.keyName,
          _dimensionOptions$pro = dimensionOptions.props,
          props = _dimensionOptions$pro === undefined ? {} : _dimensionOptions$pro;


      var selectProps = {
        props: (0, _extends3['default'])({
          defaultValue: defaultValue,
          value: this.dimensionValue,
          placeholder: langType[localeCode].placeholder
        }, props, {
          disabled: dimensionDisabled
        }),
        'class': 'margin-bottom-xs',
        on: {
          change: function change(value) {
            var selectItem = dimensionData.find(function (it) {
              return (0, _utils.relationHandler)(keyName, it) === value;
            });
            _this3.dimensionValue = value;
            _this3.$emit('dimensionChange', { value: value, selectData: selectItem });
          }
        }
      };
      return h(
        _antDesignVue.Select,
        selectProps,
        [dimensionData.map(function (it) {
          var key = (0, _utils.relationHandler)(keyName, it);
          var name = (0, _utils.relationHandler)(showName, it);
          return h(
            Option,
            {
              attrs: { value: key }
            },
            [name]
          );
        })]
      );
    },

    /**
     * 搜索下拉回调函数
     * @param { String } value 选中的key
     * @param {vNode} option
     */
    searchSelect: function searchSelect(value) {
      this.searchVal = value;
      this.getSelectNodes(value);
    },

    /**
     * 根据搜索下拉菜单选中项查询相关节点数据
     * 并触发父组件绑定事件
     * @param { String } value 下拉菜单中选中的 key
     */
    getSelectNodes: function getSelectNodes(val) {
      var _$props4 = this.$props,
          searchSelectOptions = _$props4.searchSelectOptions,
          rel = _$props4.rel;
      var searchResult = this.searchResult;
      // const { rel } = searchSelectOptions;

      var itemData = searchResult.find(function (it) {
        return (0, _utils.relationHandler)(rel[0], it) === val;
      });
      var k = (0, _utils.relationHandler)(rel[0], itemData);

      this.$emit('searchSelect', {
        key: val,
        itemData: this.$options.searchCache[k]
      });
    },

    /**
     * 渲染搜索下拉菜单
     */
    renderSearch: function renderSearch() {
      var _this4 = this;

      var h = this.$createElement;
      var _$props5 = this.$props,
          searchOptions = _$props5.searchOptions,
          rel = _$props5.rel,
          renderKey = _$props5.renderKey,
          treeFilter = _$props5.treeFilter;
      var searchResult = this.searchResult,
          localeCode = this.localeCode,
          fetching = this.fetching;


      if (!searchOptions) return null;
      // const { keyName, showName, props = {} } = searchOptions;

      var searchOrops = {
        props: {
          value: this.searchVal,
          allowClear: true,
          showArrow: false,
          filterOption: false,
          notFoundContent: fetching ? undefined : null,
          showSearch: true,
          placeholder: langType[localeCode].search
          // ...props,
        },
        on: {
          search: this.searchFetch,
          select: this.searchSelect,
          focus: function focus() {
            _this4.searchVal = [];
          }
        },
        'class': 'margin-bottom-xs',
        style: {
          height: '32px',
          overflow: 'hidden'
        }
      };
      return h(
        _antDesignVue.Select,
        searchOrops,
        [fetching ? h(_antDesignVue.Spin, { slot: 'notFoundContent' }) : null, searchResult.map(function (it, idx) {
          var key = (0, _utils.relationHandler)(rel[0], it);
          var name = (0, _utils.relationHandler)(renderKey, it);
          return h(
            Option,
            {
              attrs: { title: name },
              key: key },
            [name]
          );
        })]
      );
    },
    renderFilter: function renderFilter() {
      var h = this.$createElement;
      var searchResult = this.searchResult,
          localeCode = this.localeCode,
          fetching = this.fetching;

      var inputProps = {
        props: {
          placeholder: langType[localeCode].search
        },
        'class': 'margin-bottom-xs',
        on: {
          change: this.treeFilterDebounceHandler
        }
      };
      return h(InputSearch, inputProps);
    },
    renderComponent: function renderComponent(contextLocale, locale) {
      var h = this.$createElement;

      this.localeCode = locale;
      var _$props6 = this.$props,
          searchOptions = _$props6.searchOptions,
          rel = _$props6.rel,
          renderKey = _$props6.renderKey,
          treeFilter = _$props6.treeFilter;

      return h(Vertical, [this.renderDimension(), treeFilter ? this.renderFilter() : this.renderSearch()]);
    }
  },
  render: function render() {
    var h = arguments[0];

    return h(_LocaleReceiver2['default'], {
      attrs: {
        componentName: 'BTreeHead',
        defaultLocale: this.getDefaultLocale
      },
      scopedSlots: { 'default': this.renderComponent }
    });
  }
};