vue-ant-patterns/lib/d-card/person.js

vue-ant-patterns

'use strict';

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

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

var _extends3 = _interopRequireDefault(_extends2);

var _babelHelperVueJsxMergeProps = require('babel-helper-vue-jsx-merge-props');

var _babelHelperVueJsxMergeProps2 = _interopRequireDefault(_babelHelperVueJsxMergeProps);

var _defineProperty2 = require('babel-runtime/helpers/defineProperty');

var _defineProperty3 = _interopRequireDefault(_defineProperty2);

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

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

var _vueTypes2 = _interopRequireDefault(_vueTypes);

var _dIcon = require('../d-icon');

var _dIcon2 = _interopRequireDefault(_dIcon);

var _defaultProps = require('./defaultProps');

var _defaultProps2 = _interopRequireDefault(_defaultProps);

var _card = require('./card');

var _card2 = _interopRequireDefault(_card);

var _classnames = require('classnames');

var _classnames2 = _interopRequireDefault(_classnames);

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

/* babel-plugin-inline-import '../style/image/avatar.svg' */var avatarSvg = 'data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBzdGFuZGFsb25lPSJubyI/PjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+PHN2ZyB0PSIxNTY4NjI3MTAwNjUxIiBjbGFzcz0iaWNvbiIgdmlld0JveD0iMCAwIDEwMjQgMTAyNCIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHAtaWQ9IjY2MzIiIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB3aWR0aD0iMTYiIGhlaWdodD0iMTYiPjxkZWZzPjxzdHlsZSB0eXBlPSJ0ZXh0L2NzcyI+PC9zdHlsZT48L2RlZnM+PHBhdGggZD0iTTUxMiAyMjcuNDg4Yy03NC4xMTIgMC0xMzQuMzA0IDYwLjI4OC0xMzQuMzA0IDEzNC4zMDRzNjAuMTkyIDEzNC40IDEzNC4zMDQgMTM0LjQgMTM0LjMwNC02MC4yODggMTM0LjMwNC0xMzQuMzA0LTYwLjE5Mi0xMzQuNC0xMzQuMzA0LTEzNC40ek01MTIgMEMyMjkuMTg0IDAgMCAyMjkuMTg0IDAgNTEyczIyOS4xODQgNTEyIDUxMiA1MTJjMjgyLjc4NCAwIDUxMi0yMjkuMjE2IDUxMi01MTJTNzk0Ljc4NCAwIDUxMiAweiBtMjM3Ljg4OCA3ODAuMDk2YTI1LjI4IDI1LjI4IDAgMCAxLTI1LjMxMi0yNS4zMTJjMC0xMTYtOTMuNDA4LTIwNi44MTYtMjEyLjYwOC0yMDYuODE2cy0yMTIuNjA4IDkwLjc4NC0yMTIuNjA4IDIwNi43ODRjMCAxNC4wMTYtMTEuMjk2IDI1LjMxMi0yNS4zMTIgMjUuMzEycy0yNS4zMTItMTEuMjk2LTI1LjMxMi0yNS4zMTJjMC03MC4xMTIgMjcuNDg4LTEzNS4yOTYgNzcuNDA4LTE4My42MTZhMjU5LjM5MiAyNTkuMzkyIDAgMCAxIDg0LjUxMi01NC41OTIgMTg4LjM4NCAxODguMzg0IDAgMCAxLTI5LjQwOC0yNGMtMzQuOTEyLTM0LjkxMi01NC4yMDgtODEuNDA4LTU0LjIwOC0xMzAuODE2czE5LjItOTUuOTA0IDU0LjIwOC0xMzAuODE2YzM0LjkxMi0zNC45MTIgODEuNDA4LTU0LjIwOCAxMzAuNzg0LTU0LjIwOHM5NS45MDQgMTkuMiAxMzAuNzg0IDU0LjIwOGMzNC43ODQgMzUuMDA4IDU0LjExMiA4MS41MDQgNTQuMTEyIDEzMC45MTJzLTE5LjIgOTUuOTA0LTU0LjIwOCAxMzAuODE2YTE4Ni45MTIgMTg2LjkxMiAwIDAgMS0yOS40MDggMjQgMjYxLjc5MiAyNjEuNzkyIDAgMCAxIDg0LjUxMiA1NC41OTJjNDkuODg4IDQ4LjE5MiA3Ny40MDggMTEzLjQwOCA3Ny40MDggMTgzLjYxNmEyNS40MDggMjUuNDA4IDAgMCAxLTI1LjQwOCAyNS4yMTZ6IiBwLWlkPSI2NjMzIiBmaWxsPSIjY2NjIj48L3BhdGg+PC9zdmc+';

var Person = {
  name: 'DCardPerson',
  props: {
    prefixCls: _vueTypes2['default'].string.def('depot-dcard-person'),
    baseInfo: _defaultProps2['default'].baseInfo,
    dropDownMenuItems: _vueTypes2['default'].array.def([]),
    loading: _vueTypes2['default'].bool.def(false) // 显示预加载
  },
  data: function data() {
    return {
      bodyStyle: {
        padding: '0 16px',
        margin: 0
      },
      sVisible: false, // 是否显示checkbox
      showBackCard: false, // 是否显示卡片背面
      size: 'default'
    };
  },

  methods: {
    // 点击头像事件
    handleAvatarClick: function handleAvatarClick(e) {
      this.$emit('avatarClick', e);
    },

    // 头像下面button事件, 将卡片信息返回去
    handleButtonClick: function handleButtonClick(e, item, baseInfo) {
      this.$emit('actionButtonsClick', e, item, baseInfo);
    },

    // 点击标题事件
    handleTitleClick: function handleTitleClick(e) {
      this.$emit('titleClick', e);
    },

    // 点击checkbox
    onChangeCheckbox: function onChangeCheckbox(e, baseInfo) {
      // this.checked = e.target.checked;
      this.$emit('onChangeCheckbox', e, baseInfo);
    },

    // 鼠标滑过
    handleMouseOver: function handleMouseOver(e) {
      this.sVisible = true;
    },

    // 鼠标移出
    handleMouseOut: function handleMouseOut(e) {
      this.sVisible = false;
    },

    // 翻转卡片
    showBackCardFun: function showBackCardFun(e) {
      this.showBackCard = !this.showBackCard;
    },
    renderIntegrity: function renderIntegrity() {
      var h = this.$createElement;
      var baseInfo = this.baseInfo,
          loading = this.loading;
      var integrity = baseInfo.integrity;

      var loadingBlock = h('div', { 'class': 'depot-dcard-loading-block', style: 'width:100%;' });
      return integrity && integrity.label ? !loading ? h(
        'div',
        { 'class': 'line-progress' },
        [h(
          'span',
          { 'class': 'line-progress-txt' },
          [integrity.label, ': ', integrity.value, '%']
        ), h(_antDesignVue.Progress, {
          attrs: { strokeColor: '#0081EE', percent: integrity.value, showInfo: false }
        })]
      ) : loadingBlock : h('div', { 'class': 'line-progress' });
    },
    renderIconButtons: function renderIconButtons() {
      var h = this.$createElement;
      var baseInfo = this.baseInfo,
          handleButtonClick = this.handleButtonClick,
          loading = this.loading;
      var buttons = baseInfo.buttons;

      var loadingSpan = h('div', { 'class': 'depot-dcard-loading-span' });
      return h(
        'div',
        { 'class': 'icon-box' },
        [buttons && buttons.length ? buttons.map(function (item) {
          return !loading ? h(
            'd-icon-button',
            {
              on: {
                'click': function click(e) {
                  handleButtonClick(e, item, baseInfo);
                }
              },

              key: item.key,
              attrs: { shape: 'circle'
              }
            },
            [h('d-icon', {
              attrs: { type: item.icon }
            })]
          ) : loadingSpan;
        }) : null]
      );
    },

    // 卡片正面信息渲染
    renderFrontBaseInfo: function renderFrontBaseInfo() {
      var _this = this;

      var h = this.$createElement;
      var $slots = this.$slots,
          baseInfo = this.baseInfo,
          loading = this.loading;
      var photo = baseInfo.photo,
          employeeName = baseInfo.employeeName,
          employeeCode = baseInfo.employeeCode,
          positionName = baseInfo.positionName,
          jobName = baseInfo.jobName,
          companyName = baseInfo.companyName,
          deptName = baseInfo.deptName,
          status = baseInfo.status;

      var loadingBlock = h('div', { 'class': 'depot-dcard-loading-block' });
      var loadingBlockW50 = h('div', { 'class': 'depot-dcard-loading-block W50' });
      var loadingBlockImg = h('div', { 'class': 'depot-dcard-loading-block', style: 'width:80px;height:80px;border-radius:50%' });
      var loadingSpan = h('span', { 'class': 'depot-dcard-loading-span' });
      return h(
        'div',
        { 'class': 'front-baseinfo' },
        [h(
          'div',
          { 'class': 'avatar-box' },
          [h(
            'div',
            {
              on: {
                'click': function click(e) {
                  _this.handleAvatarClick(e);
                }
              }
            },
            [!loading ? h('d-avatar', {
              attrs: { src: photo || avatarSvg, alt: employeeName, size: 'xl' }
            }) : loadingBlockImg]
          ), this.renderIntegrity(), this.renderIconButtons()]
        ), h(
          'div',
          { 'class': 'base-info' },
          [h(
            'h3',
            {
              attrs: {
                title: employeeName
              },
              on: {
                'click': function click(e) {
                  _this.handleTitleClick(e);
                }
              }
            },
            [!loading ? employeeName : loadingBlockW50]
          ), h(
            'div',
            { 'class': 's-line s-primary-color', attrs: { title: employeeCode }
            },
            [!loading ? employeeCode : loadingBlock]
          ), h(
            'div',
            { 'class': 's-line' },
            [status && status.length ? status.map(function (it) {
              return !loading ? h(
                'span',
                { key: it.key, 'class': 'tag' },
                [it.name]
              ) : loadingSpan;
            }) : null]
          ), h(
            'div',
            { 'class': 's-line', attrs: { title: positionName + ' - ' + positionName }
            },
            [!loading ? positionName + jobName : loadingBlock]
          ), h(
            'div',
            { 'class': 's-line', attrs: { title: deptName }
            },
            [!loading ? deptName : loadingBlock]
          ), h(
            'div',
            { 'class': 's-line', attrs: { title: companyName }
            },
            [!loading ? companyName : loadingBlock]
          ), $slots['default']]
        )]
      );
    },

    // 左上角操作区域
    renderLeftTopActions: function renderLeftTopActions() {
      var _checkClass;

      var h = this.$createElement;
      var baseInfo = this.baseInfo,
          onChangeCheckbox = this.onChangeCheckbox;
      var checked = baseInfo.checked,
          id = baseInfo.id;

      var checkClass = (_checkClass = {}, (0, _defineProperty3['default'])(_checkClass, 'left-option', true), (0, _defineProperty3['default'])(_checkClass, 'checkbox-show', checked || this.sVisible), _checkClass);

      return h(
        'div',
        { 'class': checkClass },
        [h(_antDesignVue.Checkbox, {
          attrs: {
            checked: checked,
            value: id
          },
          on: {
            'change': function change(e) {
              onChangeCheckbox(e, baseInfo);
            }
          }
        })]
      );
    },

    // 右上角操作区域
    renderRightTopActions: function renderRightTopActions() {
      var _this2 = this;

      var h = this.$createElement;
      var dropDownMenuItems = this.dropDownMenuItems,
          loading = this.loading;

      var menuProps = {
        props: {
          overlayClassName: 'rightOptionDropdown'
        },
        on: {
          click: function click(_ref) {
            var item = _ref.item,
                key = _ref.key,
                keyPath = _ref.keyPath;

            _this2.$emit('rightOptionMenuSelect', { item: item, key: key, keyPath: keyPath });
          }
        }
      };
      var loadingBlock = h('div', { 'class': 'depot-dcard-loading-block', style: 'width:20px;' });
      return dropDownMenuItems.length > 0 && h(
        'div',
        { 'class': 'right-option' },
        [!loading ? h(
          _antDesignVue.Dropdown,
          {
            attrs: { trigger: ['click'], overlayClassName: 'rightOptionDropdown' }
          },
          [h('d-icon', {
            attrs: { type: 'ellipsis' }
          }), h(
            _antDesignVue.Menu,
            (0, _babelHelperVueJsxMergeProps2['default'])([{ slot: 'overlay' }, menuProps]),
            [dropDownMenuItems.map(function (it) {
              if (it === null) {
                return h(_antDesignVue.Menu.Divider, { key: 'null' });
              }
              return h(
                _antDesignVue.Menu.Item,
                { key: it.key },
                [it.icon ? h(_dIcon2['default'], {
                  attrs: { type: it.icon }
                }) : null, it.title]
              );
            })]
          )]
        ) : loadingBlock]
      );
    },

    // 右下角操作翻转卡片区域
    renderRightBottomAactions: function renderRightBottomAactions() {
      var _class,
          _this3 = this;

      var h = this.$createElement;

      var rightBottomProps = {
        'class': (_class = {}, (0, _defineProperty3['default'])(_class, 'right-bottom-operation', true), (0, _defineProperty3['default'])(_class, 'rightBottom-show', this.sVisible), _class),
        on: {
          click: function click(e) {
            _this3.showBackCardFun(e);
          }
        }
      };
      return h('div', rightBottomProps);
    },

    // 卡片背面信息渲染
    renderBackInfo: function renderBackInfo() {
      var h = this.$createElement;
      var baseInfo = this.baseInfo;
      var employeeDate = baseInfo.employeeDate,
          employeeName = baseInfo.employeeName,
          employmentForm = baseInfo.employmentForm,
          postion = baseInfo.postion,
          jobFamiliy = baseInfo.jobFamiliy;

      return h(
        'div',
        { 'class': 'backInfoWrapper' },
        [h(
          'h3',
          {
            attrs: { title: employeeName }
          },
          [employeeName]
        ), h(
          'div',
          { 'class': 'back-info-item' },
          [h(
            'span',
            { 'class': 'name' },
            ['\u663E\u793A\u987A\u5E8F\uFF1A']
          ), h(
            'span',
            { 'class': 'value' },
            ['129']
          )]
        ), h(
          'div',
          { 'class': 'back-info-item' },
          [h(
            'span',
            { 'class': 'name' },
            ['\u5165\u804C\u65E5\u671F\uFF1A']
          ), h(
            'span',
            { 'class': 'value' },
            [employeeDate]
          )]
        ), h(
          'div',
          { 'class': 'back-info-item' },
          [h(
            'span',
            { 'class': 'name' },
            ['\u7528\u5DE5\u5F62\u5F0F\uFF1A']
          ), h(
            'span',
            { 'class': 'value' },
            [employmentForm]
          )]
        ), h(
          'div',
          { 'class': 'back-info-item' },
          [h(
            'span',
            { 'class': 'name' },
            ['\u804C\u7B49\uFF1A']
          ), h(
            'span',
            { 'class': 'value' },
            [postion]
          )]
        ), h(
          'div',
          { 'class': 'back-info-item' },
          [h(
            'span',
            { 'class': 'name' },
            ['\u804C\u52A1\u65CF\uFF1A']
          ), h(
            'span',
            { 'class': 'value' },
            [jobFamiliy]
          )]
        )]
      );
    }
  },
  render: function render() {
    var _cx,
        _this4 = this;

    var h = arguments[0];
    var prefixCls = this.prefixCls,
        $listeners = this.$listeners,
        $attrs = this.$attrs,
        baseInfo = this.baseInfo,
        loading = this.loading;
    var checked = baseInfo.checked;

    var personProps = {
      'class': (0, _classnames2['default'])((_cx = {}, (0, _defineProperty3['default'])(_cx, prefixCls, 1), (0, _defineProperty3['default'])(_cx, prefixCls + '-selected', checked), _cx)),
      attrs: (0, _extends3['default'])({}, $attrs),
      on: (0, _extends3['default'])({}, $listeners, {
        mouseenter: function mouseenter(e) {
          _this4.handleMouseOver(e);
        },
        mouseleave: function mouseleave(e) {
          _this4.handleMouseOut(e);
        }
      })
    };
    return h(
      'div',
      personProps,
      [h(
        _card2['default'],
        {
          attrs: { rollingOver: true, size: this.size, bodyStyle: this.bodyStyle }
        },
        [h(
          'template',
          { slot: 'content' },
          [this.renderLeftTopActions(), this.renderRightTopActions(), this.renderFrontBaseInfo()]
        ), h(
          'template',
          { slot: 'backContent' },
          [this.renderLeftTopActions(), this.renderRightTopActions(), this.renderBackInfo()]
        )]
      )]
    );
  }
};

exports['default'] = Person;