crm-mobile/pages_crm/components/tabAbout/aboutGroup.vue

<template>
  <view class="section about-group">
    <view class="section-title" @click="handleMore">
      <image :src="$static('images/crm_about/contacts.png')" class="icon" />
      <text class="title">
        相关团队
      </text>
      <view
        v-if="!config.isSeas"
        class="add-btn"
        @click="handleAdd">
        <text class="wk wk-plus icon-add" />
        <text>新建</text>
      </view>
    </view>

    <view class="section-body">
      <template v-if="list.length > 0">
        <view class="list">
          <view v-for="(item, index) in list" :key="index" class="list-item">
            <wk-avatar
              :name="item.realname"
              :avatar="item.img"
              :size="12"
              class="list-item-avatar" />
            <view class="list-item-content">
              <view class="box">
                <text class="name">
                  {{ item.realname }}
                </text>
                <text class="role">
                  {{ getRoleText(item.power) }}
                </text>
              </view>
              <view class="dept">
                {{ item.deptName }}
              </view>
            </view>
          </view>
        </view>
      </template>
      <template v-else>
        <view class="no-data">
          暂无数据
        </view>
      </template>
    </view>
  </view>
</template>

<script>
  export default {
    name: 'AboutGroup',
    props: {
      list: {
        type: Array,
        required: true
      },
      config: {
        type: Object,
        default: () => {}
      }
    },
    data() {
      return {}
    },
    methods: {
      getRoleText(power) {
        // 3 负责人 1 2 普通员工
        if (Number(power) === 3) return '负责人'
        return '普通员工'
      },

      handleMore() {
        if (this.config.isSeas) return
        const type = this.config.type
        const checkRes = this.$auth(`crm.${type}.teamsave`)
        if (!checkRes) {
          this.$toast('权限不足！')
          return
        }
        // let id = null
        // if (type === 'customer') {
        // 	id = this.config.detail.customerId
        // }

        let id = this.config.detail[`${type}Id`]
        this.$Router.navigateTo({
          url: '/pages_crm/group/index',
          query: {
            type: this.config.type,
            id: id
          }
        })
      },

      handleAdd() {}
    }
  }
</script>

<style scoped lang="scss">
@import './style.scss';

.about-group {
  .list {
    background-color: white;
    padding: 0 32rpx;
    .list-item {
      border-bottom: 1rpx solid $border-color;
      @include padding;
      @include left;
      &:last-child {
        border-bottom: 0 none;
      }
      &-avatar {
        width: 66rpx;
        height: 66rpx;
        border-radius: 50%;
        margin-right: 26rpx;
      }
      &-content {
        flex: 1;
        .box {
          width: 100%;
          display: flex;
          .name {
            flex: 1;
            font-size: $wk-font-medium;
            color: $dark;
          }
          .role {
            font-size: $wk-font-sm;
            color: $gray;
          }
        }
        .dept {
          font-size: $wk-font-sm;
          color: $gray;
        }
      }
    }
  }
}
</style>