vue-ant-patterns/lib/d-detail-info/baseInfo.js

vue-ant-patterns

'use strict';

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

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

var _propsType = require('./propsType');

var _propsType2 = _interopRequireDefault(_propsType);

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+';
exports['default'] = {
  name: 'BaseInfo',
  props: {
    baseInfo: _propsType2['default'].baseInfo,
    integrity: _propsType2['default'].integrity
  },
  data: function data() {
    return {};
  },

  methods: {
    handleClick: function handleClick(e, item) {
      this.$emit('bannerButtonsClick', e, item);
    },
    renderIconButtons: function renderIconButtons() {
      var h = this.$createElement;
      var baseInfo = this.baseInfo,
          handleClick = this.handleClick;
      var buttons = baseInfo.buttons;

      return h(
        'span',
        { 'class': 'icon-box' },
        [buttons && buttons.length ? buttons.map(function (item) {
          return h(
            'd-icon-button',
            {
              on: {
                'click': function click(e) {
                  handleClick(e, item);
                }
              },

              key: item.key,
              attrs: { shape: 'circle'
              }
            },
            [h('d-icon', {
              attrs: { type: item.icon }
            })]
          );
        }) : null]
      );
    },
    renderIntegrity: function renderIntegrity() {
      var h = this.$createElement;
      var integrity = this.integrity;


      return integrity && integrity.label ? h(
        'div',
        { 'class': 'line-progress' },
        [h('span', [integrity.label, ': ', integrity.value, '%']), h(_antDesignVue.Progress, {
          attrs: { strokeColor: '#fff', percent: integrity.value, width: 140 }
        })]
      ) : h('div', { 'class': 'line-progress' });
    }
  },
  render: function render() {
    var h = arguments[0];
    var baseInfo = this.baseInfo;
    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;


    return h(
      'div',
      { 'class': 'banner-base-info-box' },
      [h(
        'div',
        { 'class': 'avatar-box' },
        [h(
          'div',
          { 'class': 'd-avatar w112' },
          [h('img', {
            attrs: { src: photo || avatarSvg, alt: employeeName }
          })]
        ), this.renderIntegrity(), this.renderIconButtons()]
      ), h(
        'div',
        { 'class': 'base-info' },
        [h(
          'h3',
          {
            attrs: { title: employeeName }
          },
          [employeeName]
        ), h(
          'div',
          { 'class': 's-line', attrs: { title: employeeCode }
          },
          [employeeCode]
        ), h(
          'div',
          { 'class': 's-line' },
          [status && status.length ? status.map(function (it) {
            return h(
              'span',
              { key: it.key, 'class': 'tag' },
              [it.name]
            );
          }) : null]
        ), h(
          'div',
          { 'class': 's-line', attrs: { title: positionName + ' - ' + positionName }
          },
          [positionName, ' ', jobName]
        ), h(
          'div',
          { 'class': 's-line', attrs: { title: deptName }
          },
          [deptName]
        ), h(
          'div',
          { 'class': 's-line', attrs: { title: companyName }
          },
          [companyName]
        )]
      )]
    );
  }
};