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

vue-ant-patterns

import _extends from 'babel-runtime/helpers/extends';
import DContainer from '../../es/d-container';

import { Select, AutoComplete, Input, Icon, Spin } from 'ant-design-vue';
import PropTypes from 'ant-design-vue/es/_util/vue-types';
import { hasProp } from 'ant-design-vue/es/_util/props-util';
import { listToTree, treeToList, isEmptyObj, debounceHandler, relationHandler } from '../../es/_utils';
import extend from 'extend';
import moment from 'moment';

import LocaleReceiver from 'ant-design-vue/es/locale-provider/LocaleReceiver';

import request from '../_biz-utils/request';

import EN from './locale/en_US';
import CN from './locale/zh_CN';

var Horizontal = DContainer.Horizontal,
    Vertical = DContainer.Vertical;

// const { RangePicker } = DatePicker;

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


var langType = {
  'zh-cn': CN,
  'en-us': EN
};

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

export default {
  name: 'BTreeHeader',
  props: {
    // 树节点父子关系关联字段
    rel: PropTypes.array.def([['data', 'hid'], ['data', 'parentHid']]),
    // 树节点, 显示字段
    renderKey: PropTypes.oneOfType([PropTypes.string, PropTypes.array]).def(['data', 'name']),
    // 维度
    dimensionOptions: PropTypes.object,
    // 搜索
    searchOptions: PropTypes.object,
    // 搜索选择后的查询参数
    searchSelectOptions: PropTypes.object,
    // 时间戳
    queryDate: PropTypes.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 = debounceHandler(this.searchFetch);
    // }
    // if (treeFilter) {
    this.treeFilterDebounceHandler = 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: _extends({}, CN)
      };
      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 request(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: _extends({
          viewInvalid: false
        }, data, {
          // 关键词
          dimHid: dimensionValue,
          date: queryDate,
          nameStr: val
        })
      };
      this.fetching = true;
      request(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 = relationHandler(rel[0], it);
          // const pk = relationHandler(rel[1], it);
          var n = 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: _extends({
          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 relationHandler(keyName, it) === value;
            });
            _this3.dimensionValue = value;
            _this3.$emit('dimensionChange', { value: value, selectData: selectItem });
          }
        }
      };
      return h(
        Select,
        selectProps,
        [dimensionData.map(function (it) {
          var key = relationHandler(keyName, it);
          var name = 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 relationHandler(rel[0], it) === val;
      });
      var k = 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(
        Select,
        searchOrops,
        [fetching ? h(Spin, { slot: 'notFoundContent' }) : null, searchResult.map(function (it, idx) {
          var key = relationHandler(rel[0], it);
          var name = 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(LocaleReceiver, {
      attrs: {
        componentName: 'BTreeHead',
        defaultLocale: this.getDefaultLocale
      },
      scopedSlots: { 'default': this.renderComponent }
    });
  }
};