ylrz_his_scrm_adminUI/src/views/qw/externalContact/ExternalContactNameCell.vue

<template>
  <span class="external-contact-name-cell">
    <span class="external-contact-name-text" :style="nameStyle">{{ row.name || '-' }}</span>
    <el-tooltip
      v-if="hasManageIndicator"
      placement="top"
      :disabled="!row.manageRemark"
    >
      <div slot="content" class="external-contact-manage-tooltip">
        <div v-if="row.manageRemark" class="external-contact-manage-remark">{{ row.manageRemark }}</div>
      </div>
      <i :class="iconClass" />
    </el-tooltip>
  </span>
</template>

<script>
export default {
  name: 'ExternalContactNameCell',
  props: {
    row: {
      type: Object,
      required: true
    }
  },
  computed: {
    manageStatus() {
      return this.row && this.row.manageStatus != null ? Number(this.row.manageStatus) : null
    },
    isBlacklisted() {
      return this.manageStatus === 2
    },
    hasManageRemark() {
      const remark = this.row && this.row.manageRemark
      return remark != null && String(remark).trim() !== ''
    },
    isManaged() {
      return this.manageStatus === 1 && this.hasManageRemark
    },
    hasManageIndicator() {
      return this.isBlacklisted || this.isManaged
    },
    nameStyle() {
      if (this.isBlacklisted) {
        return { color: '#f56c6c' }
      }
      if (this.isManaged) {
        return { color: '#67c23a' }
      }
      return {}
    },
    iconClass() {
      if (this.isBlacklisted) {
        return 'el-icon-warning external-contact-manage-icon external-contact-manage-icon--danger'
      }
      if (this.isManaged) {
        return 'el-icon-warning external-contact-manage-icon external-contact-manage-icon--success'
      }
      return ''
    }
  }
}
</script>

<style scoped>
.external-contact-name-cell {
  display: inline-flex;
  align-items: center;
  max-width: 100%;
}

.external-contact-name-text {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.external-contact-manage-icon {
  margin-left: 4px;
  font-size: 14px;
  cursor: pointer;
  flex-shrink: 0;
}

.external-contact-manage-icon--danger {
  color: #f56c6c;
}

.external-contact-manage-icon--success {
  color: #67c23a;
}

.external-contact-manage-remark {
  line-height: 1.5;
  word-break: break-all;
}
</style>