vue-ant-patterns/biz-lib/b-header-search/index.js

vue-ant-patterns

'use strict';

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

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

var _extends3 = _interopRequireDefault(_extends2);

var _dAutoComplete = require('../../lib/d-auto-complete');

var _dAutoComplete2 = _interopRequireDefault(_dAutoComplete);

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 _bizUtils = require('../_biz-utils');

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

var Option = _antDesignVue.AutoComplete.Option;
var Horizontal = _dContainer2['default'].Horizontal,
    Vertical = _dContainer2['default'].Vertical;
var API_PLATFORM = (global || window).globalJSConfig.SERVICE_CONFIG.API_PLATFORM;

var getUserListUrl = API_PLATFORM + 'empSelectorService/getEmpByPinYin'; // 获取查询员工
var getBlobUrl = API_PLATFORM + 'storageController/file/'; // 获取接口
var BHeaderSearch = {
  name: 'BHeaderSearch',
  props: {
    menuList: _vueTypes2['default'].array,
    width: _vueTypes2['default'].string.def('300'),
    autoFocus: _vueTypes2['default'].bool.def(true)
  },

  data: function data() {
    return {
      searchResult: []
    };
  },
  created: function created() {},
  mounted: function mounted() {},

  methods: {
    renderOptions: function renderOptions() {
      var h = this.$createElement;
      var searchResult = this.searchResult;
      /**
       * 默认返回个空的 Option
       */

      var resultOption = h(
        Option,
        {
          attrs: { disabled: true, value: '', className: 'show-all' },
          key: 'all' },
        [h('span', ['\u5171\u627E\u5230: ', searchResult.length, '\u4E2A\u7ED3\u679C'])]
      );
      if (!searchResult.length) return resultOption;

      var resMap = {};

      searchResult.map(function (it) {
        resMap[it.key] = it;
      });

      var resOptions = Object.keys(resMap).map(function (key) {
        return resMap[key];
      });

      var options = resOptions.concat([resultOption]);
      return options;
    },
    search: function search(value) {
      var _this = this;

      var h = this.$createElement;

      this.searchResult = [];
      // 做前后交互
      if (!value) {
        return;
      }
      var menuList = this.$props.menuList;

      var startWithList = [];
      var likeList = [];
      var equalsList = [];
      if (menuList.length) {
        menuList.map(function (item) {
          if (item.funcId) {
            // console.log(item.name);
            if (item.name === value) {
              startWithList.push((0, _extends3['default'])({}, item));
            } else {
              var index = item.name.indexOf(value);
              if (index === 0) {
                startWithList.push(item);
              } else if (index > 0) {
                likeList.push(item);
              }
            }
          }
        });
        equalsList = [].concat(startWithList, likeList);
        // 菜单
        if (equalsList.length) {
          var searchResult = equalsList.map(function (item, idx) {
            var parentMenuList = _this.getParentMenu(item, menuList);
            parentMenuList = parentMenuList.map(function (it) {
              return it.name;
            });
            var ruleTitle = _this.ruleTitle(value, item.name);
            return h(
              Option,
              {
                key: item.id + '-' + idx,
                attrs: { 'data-v': item.id,
                  text: item.name,
                  title: item.name,
                  'data-name': item.name,
                  selectType: 'menuSelect'
                }
              },
              [h('p', { 'class': 'desp', domProps: {
                  'innerHTML': ruleTitle
                }
              }), h(
                'p',
                { 'class': 'desp desc' },
                [parentMenuList.join(' > ')]
              )]
            );
          }).filter(function (T) {
            return T;
          });
          this.searchResult = searchResult;
        } else {
          // 员工-调用接口
          this.getEmpSelectorService(value);
        }
      }
    },

    // 选择
    select: function select(value, option) {
      // console.log('下拉菜单选择了::', value, option);
      var attrs = option.data.attrs;
      var selectType = attrs.selectType;

      this.$emit('select', { selectType: selectType, value: attrs['data-v'], option: option });
    },
    getParentMenu: function getParentMenu(item, raw) {
      var arr = [];
      if (!item || !item.parentId) return [];
      function getMenu(item) {
        var arr = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : [];

        raw.find(function (it) {
          if (it.id === item.parentId) {
            arr.push(it);
            if (it.parentId !== '-1') {
              getMenu(it, arr);
            }
          }
        });
        return arr;
      }
      var ptMenu = getMenu(item);
      ptMenu.reverse().map(function (it) {
        arr.push(it);
      });
      return arr;
    },

    // 处理高亮搜索结果
    ruleTitle: function ruleTitle(searchValue, name) {
      var titleString = name;
      if (!titleString) {
        return '';
      }
      if (searchValue && searchValue.length > 0) {
        // 匹配关键字正则
        var replaceReg = new RegExp(searchValue, 'g');
        // 高亮替换v-html值
        var replaceString = '<span class="highlight">' + searchValue + '</span>';
        // 开始替换
        titleString = titleString.replace(replaceReg, replaceString);
      }
      return titleString;
    },

    // 获取员工数据
    getEmpSelectorService: function getEmpSelectorService(searchValue) {
      var _this2 = this;

      var h = this.$createElement;

      var tmpHeader = {};
      tmpHeader.uniqueCode = 'e739c665ca1749b2bdd93c55ac1f4400';
      (0, _bizUtils.request)({
        url: getUserListUrl,
        data: {
          pinyinStr: searchValue,
          num: 10
        },
        headers: tmpHeader // 和权限有关
      }).then(function (_ref) {
        var data = _ref.data;

        var dataList = data.data;
        if (dataList.length) {
          var reactNode = dataList.map(function (item, idx) {
            var reg = new RegExp(searchValue);
            var photo = item.photo,
                employeeName = item.employeeName;

            var isName = reg.test(item.employeeName);
            var isPinyin = reg.test(item.quanPin);
            var isCode = reg.test(item.employeeCode);
            var ruleTitle = _this2.ruleTitle(searchValue, employeeName);

            if (isName || isPinyin || isCode) {
              return h(
                Option,
                {
                  key: item.employeeId + '-' + idx,
                  attrs: { 'data-v': item.employeeId,
                    text: employeeName,
                    title: employeeName,
                    'data-name': employeeName,
                    selectType: 'empSelect'
                  }
                },
                [h(Horizontal, [h(
                  'div',
                  { 'class': 'margin-right-xs' },
                  [h('a-avatar', {
                    attrs: { icon: 'user', src: photo ? '' + getBlobUrl + photo : '', alt: employeeName }
                  })]
                ), h(Vertical, [h('p', { 'class': 'desp', domProps: {
                    'innerHTML': ruleTitle
                  }
                }), h(
                  'p',
                  { 'class': 'desp desc' },
                  [item.positionName, item.positionName ? ' ' + item.deptName : item.deptName, item.deptName ? ' ' + item.companyName : item.companyName]
                )])])]
              );
            } else {
              return null;
            }
          }).filter(function (T) {
            return T;
          });
          _this2.searchResult = reactNode;
        }
      });
    },

    // 渲染右侧弹框员工信息
    renderPopoverInfo: function renderPopoverInfo(item) {
      var h = this.$createElement;
      var photo = item.photo,
          gender = item.gender,
          employeeName = item.employeeName,
          employeeCode = item.employeeCode,
          mobileTel = item.mobileTel,
          businessEmail = item.businessEmail,
          positionName = item.positionName,
          deptName = item.deptName,
          companyName = item.companyName,
          employeeStatus = item.employeeStatus,
          activeStatus = item.activeStatus,
          deptType = item.deptType;

      return h(Horizontal, [h(
        Vertical,
        { 'class': 'flex-center-center' },
        [h('d-avatar', {
          attrs: { size: 'small', icon: 'user', src: photo ? '' + getBlobUrl + photo : '', alt: employeeName }
        }), h(
          'div',
          { 'class': 'emp-tags flex  margin-top-md' },
          [employeeStatus ? h(
            'a-tag',
            { 'class': 'pinfo-tagcs' },
            [employeeStatus.name]
          ) : '', activeStatus ? h(
            'a-tag',
            { 'class': 'pinfo-tagcs' },
            [activeStatus.name]
          ) : '', deptType ? h(
            'a-tag',
            { 'class': 'pinfo-tagcs' },
            [deptType.name]
          ) : '']
        )]
      ), h(
        Vertical,
        { 'class': 'f12' },
        [h(
          'p',
          { 'class': 'popover-info-item' },
          [h(
            'span',
            { 'class': 'f14' },
            [employeeName]
          ), gender ? h('span', ['[', gender.name, ']']) : '', h(
            'span',
            { 'class': 'margin-left-md' },
            [employeeCode]
          )]
        ), mobileTel && h(
          'p',
          { 'class': 'popover-info-item' },
          [h('a-icon', { style: '{ fontSize: \'16px\', color: \'#005BAC\' }', attrs: { type: 'phone' }
          }), h(
            'span',
            { 'class': 'margin-left-sm' },
            [mobileTel]
          )]
        ), businessEmail && h(
          'p',
          { 'class': 'popover-info-item' },
          [h('a-icon', {
            attrs: { type: 'mail' },
            style: '{ fontSize: \'16px\', color: \'#005BAC\' }' }), h(
            'span',
            { 'class': 'margin-left-sm' },
            [businessEmail]
          )]
        ), h('div', [h(
          'p',
          { 'class': 'popover-info-item' },
          [positionName]
        ), h(
          'p',
          { 'class': 'popover-info-item' },
          [deptName]
        ), h(
          'p',
          { 'class': 'popover-info-item' },
          [companyName]
        )])]
      )]);
    }
  },

  render: function render() {
    var _this3 = this;

    var h = arguments[0];
    var _$props = this.$props,
        width = _$props.width,
        autoFocus = _$props.autoFocus;

    var widthComplement = /calc/.test(width) || /(px|\%|rem|vw|em)$/i.test(width) ? width : width + 'px';
    var autoComplete = {
      props: {
        dropdownMatchSelectWidth: false,
        dropdownStyle: {
          width: widthComplement
        },
        inputWidth: widthComplement,
        optionLabelProp: 'title',
        autoFocus: autoFocus
      },
      on: {
        change: function change(value) {
          _this3.$emit('change', value);
        },
        search: function search(value) {
          _this3.search(value);
        },
        select: function select(value, option) {
          _this3.select(value, option);
        }
      }
    };
    return h(
      _dAutoComplete2['default'],
      autoComplete,
      [this.renderOptions()]
    );
  }
};

BHeaderSearch.install = function (Vue) {
  Vue.component(BHeaderSearch.name, BHeaderSearch);
};

exports['default'] = BHeaderSearch;