vue-ant-patterns/biz-es/b-recognition/fullRecognition.js

vue-ant-patterns

import _defineProperty from 'babel-runtime/helpers/defineProperty';
var API_PLATFORM = (global || window).globalJSConfig.SERVICE_CONFIG.API_PLATFORM;

import PropTypes from 'ant-design-vue/es/_util/vue-types';
import DContainer from '../../es/d-container';
import Vue from 'vue';
var Vertical = DContainer.Vertical,
    Horizontal = DContainer.Horizontal;

import cx from 'classnames';
import vuescroll from 'vuescroll/dist/vuescroll-native';
// 导入css文件
import 'vuescroll/dist/vuescroll.css';
var getBlobUrl = API_PLATFORM + 'storageController/file/'; // 获取接口
Vue.component('vue-scroll', vuescroll);

export default {
  name: 'fullRecognition',
  props: {
    recognitionInfo: PropTypes.Object,
    option: PropTypes.any,
    localMsg: PropTypes.Object,
    tagsList: PropTypes.Object,
    hideIntegrityAndTags: PropTypes.bool,
    collapsible: PropTypes.bool,
    showIntegrity: PropTypes.bool.def(true)
  },
  data: function data() {
    return {
      personData: this.recognitionInfo
    };
  },
  mounted: function mounted() {
    // console.log(this.recognitionInfo);
  },

  watch: {
    recognitionInfo: {
      handler: function handler(val) {
        this.personData = val;
      },

      deep: true
    }
  },
  methods: {
    desMenuClick: function desMenuClick(e) {
      // console.log(e);
      switch (e.key) {
        case 1:
          // 职位说明书
          break;
        case 2:
          // 职务说明书
          break;
      }
    },
    editAction: function editAction() {
      this.$emit('editAction');
    },
    collapseBtn: function collapseBtn() {
      // this.type === 'mini';
      this.$emit('changeType', 'mini');
    },

    // 渲染标签列表
    renderTagsList: function renderTagsList() {
      var h = this.$createElement;
      var tagsList = this.$props.tagsList;

      return tagsList.map(function (item, index) {
        return h(
          'a-tag',
          { 'class': 'emp-tags margin-bottom-xs' },
          [item]
        );
      });
    }
  },
  render: function render() {
    var _this = this,
        _cx;

    var h = arguments[0];
    var $props = this.$props,
        personData = this.personData;
    var option = $props.option,
        localMsg = $props.localMsg,
        hideIntegrityAndTags = $props.hideIntegrityAndTags,
        collapsible = $props.collapsible,
        showIntegrity = $props.showIntegrity;

    var progressProps = {
      props: {
        width: 100,
        strokeWidth: 8,
        showInfo: false,
        percent: personData.integrity === null ? 0 : parseInt(personData.integrity)
      }
    };
    // 折叠
    var btnProps = {
      'class': 'full-collapse-btn',
      on: {
        click: function click() {
          _this.collapseBtn();
        }
      }
    };
    // 自定义滚动条
    var vuescrollProps = {
      props: {
        ops: {
          bar: {
            hoverStyle: true,
            onlyShowBarOnScroll: false, // 是否只有滚动的时候才显示滚动条
            background: '#fff' // 滚动条颜色
          }
        }
      }
    };
    // 右侧操作
    var operationsProps = {
      'class': cx((_cx = {}, _defineProperty(_cx, 'flex-end-center', true), _defineProperty(_cx, 'recognition-operations', true), _defineProperty(_cx, 'showMiddlePart', !hideIntegrityAndTags), _cx))
    };

    return h(
      'div',
      { 'class': 'fullRecognition' },
      [h(
        'a-row',
        {
          attrs: { type: 'flex' }
        },
        [h('a-col', [h(Horizontal, [h('d-container-v', [h('d-avatar', {
          attrs: {
            size: 80,
            icon: 'user',
            src: personData.photo ? '' + getBlobUrl + personData.photo : ''
          },
          'class': 'avatar-self'
        }), h(
          'd-container-h',
          {
            attrs: { justify: 'center' },
            'class': 'margin-top-md' },
          [h(
            'a-tooltip',
            {
              attrs: { placement: 'bottom' },
              'class': 'margin-right-md' },
            [h(
              'template',
              { slot: 'title' },
              [personData.mobileTel ? personData.mobileTel : '暂无信息']
            ), h(
              'd-icon-button',
              { 'class': 'radiconbtn' },
              [h('a-icon', { 'class': 'operation-btn', attrs: { type: 'phone' }
              })]
            )]
          ), h(
            'a-tooltip',
            {
              attrs: { placement: 'bottom' }
            },
            [h(
              'template',
              { slot: 'title' },
              [personData.businessEmail ? personData.businessEmail : '暂无信息']
            ), h(
              'd-icon-button',
              { 'class': 'radiconbtn' },
              [h('a-icon', { 'class': 'operation-btn', attrs: { type: 'mail' }
              })]
            )]
          )]
        )]), h(
          'div',
          { 'class': 'demarginleft' },
          [h(
            'd-container-v',
            {
              attrs: { justify: 'between' },
              'class': 'pinfo' },
            [h('div', [h(
              'span',
              { 'class': 'pinfo-namespan' },
              [personData.employeeName]
            ), h(
              'span',
              { 'class': 'pinfo-sexspan' },
              [personData.gender ? '[' + personData.gender.name + ']' : '']
            )]), h(
              'div',
              { 'class': 'pinfo-empcode' },
              [personData.employeeCode]
            ), h('div', [h(
              'a-tag',
              { 'class': 'pinfo-tagcs' },
              [personData.employeeStatus ? personData.employeeStatus.name : '']
            ), h(
              'a-tag',
              { 'class': 'pinfo-tagcs' },
              [personData.activeStatus ? personData.activeStatus.name : '']
            )]), h(
              'div',
              { 'class': 'pinfo-comcode' },
              [personData.positionName]
            ), h(
              'div',
              { 'class': 'pinfo-comcode' },
              [personData.deptName]
            ), h(
              'div',
              { 'class': 'pinfo-comcode' },
              [personData.companyName]
            )]
          )]
        )])]), !hideIntegrityAndTags ? h('a-col', [h(
          Vertical,
          { 'class': 'flex-start-center' },
          [showIntegrity ? h(
            'div',
            { 'class': 'progress-container' },
            [h(
              'div',
              { 'class': 'margin-bottom-xs text-color-65 f12' },
              ['资料完整度' + (personData.integrity ? parseInt(personData.integrity) + '%' : 0)]
            ), h('a-progress', progressProps)]
          ) : '', h(
            'div',
            { 'class': 'tags-container' },
            [h(
              'vue-scroll',
              vuescrollProps,
              [this.renderTagsList()]
            )]
          )]
        )]) : '', option ? h('a-col', [h(
          'd-container-h',
          operationsProps,
          [option]
        )]) : '']
      ), collapsible ? h('div', btnProps) : '']
    );
  }
};