bjquanjiang
/
DigitalScholl

<template>
  <view @click="click" class="tree-item">
    <!-- 用户头像 -->
    <image
      v-if="item.type === 'user'"
      class="tree-item-avatar"
      :src="avatar"
      :style="{ borderRadius: roundAvatar ? '50%' : '3px' }"
      mode="aspectFill"
    ></image>

    <!-- 名称 -->
    <text class="tree-item-title">{{ item.name }}</text>

    <!-- 用户标签 -->
    <l-tag :line="tagColor" size="sm" class="margin-left-sm">{{ tagName }}</l-tag>

    <!-- 如果开启选择按钮显示，并且级别符合，则显示按钮 -->
    <view v-if="button" class="tree-item-action">
      <l-button @click="$emit('buttonClick', item)" line="green" size="sm">选择</l-button>
    </view>
  </view>
</template>

<script>
export default {
  name: 'l-organize-single-item',

  props: {
    item: {},
    button: {}
  },

  methods: {
    // 点击事件
    click(e) {
      this.$emit('click', e)
    }
  },

  computed: {
    // 获取用户头像
    avatar() {
      if (!Number.isNaN(this.item.img)) {
        return Number(this.item.img) === 1 ? '/static/img-avatar/chat-boy.jpg' : '/static/img-avatar/chat-girl.jpg'
      }

      return this.item.img
    },

    // 获取树形列表每一项后面 tag 的显示
    tagName() {
      return { user: '职员', department: '部门', company: '公司' }[this.item.type]
    },

    // 获取 tag 的颜色
    tagColor(item) {
      return { company: 'red', department: 'blue', user: 'green' }[this.item.type]
    },

    // 头像圆形/方形显示参数
    roundAvatar() {
      return this.CONFIG('pageConfig.roundAvatar')
    }
  }
}
</script>

<style lang="less" scoped>
.tree-item {
  background-color: #fff;
  display: flex;
  min-height: 65rpx;
  align-items: center;

  .tree-item-avatar {
    width: 60rpx;
    height: 60rpx;
    margin-top: 8rpx;
    margin-bottom: 8rpx;
    margin-left: 30rpx;
    margin-right: 16rpx;
  }

  .tree-item-action {
    position: absolute;
    right: 30rpx;
  }
}
</style>