data-marketing-platform/src/views/marketing/apps/components/ipCell.vue

<template>
  <div class="cell">
    <div class="ellipsis" style="width: 100%; text-align: left;" v-for="(list, index) in [whitelist, blacklist]">
      <span class="title">{{ index == 0 ? '白名单:' : '黑名单:' }}</span>
      <span class="item" v-for="item in list" :key="item">{{item}}</span>
      <span class="item" v-if="list.length <= 0">--</span>
    </div>
    <div class="action">
      <el-link type="info" @click="handleEdit" style="color: #167AF0; line-height: 18px;" >
        {{ blacklist.length > 0 ? '查看详情' : '添加IP'}}
      </el-link>
    </div>
  </div>
  <IpForm ref="IpFormRef" @refresh="handleUpdate()" />
</template>
<script setup>
import { ref, watch } from 'vue';
const IpForm = defineAsyncComponent(() => import('./ipForm.vue'));

const props = defineProps(['ipList', 'rowData']);
const emit = defineEmits(['refresh']);

const blacklist = ref([]);
const whitelist = ref([]);
const IpFormRef = ref();

watch(
  () => props.ipList,
  (newVal) => {
    blacklist.value = [];
    whitelist.value = [];
    let temp = '';
    (newVal || []).forEach(item => {
      if (item.sourceType == 2) {
        temp = item.startIp + (item.endIp ? '/' + item.endIp.split('.').pop() : '');
      } else {
        temp = item.groupName;
      }
      item.ipType == 1 ? whitelist.value.push(temp) : blacklist.value.push(temp);
    });
  },
  { immediate: true }
);

// 修改域名弹窗
const handleEdit = () => {
  IpFormRef.value.openDialog(props.ipList, props.rowData);
};

const handleUpdate = () => {
  emit('refresh');
}
</script>
<style scoped lang="scss">
.cell {
  padding: 10px 0;
  // .flex {
  //   display: flex;
  //   flex-wrap: wrap;
  //   margin-bottom: 5px;
  // }
  .title {
    text-align: left;
    line-height: 14px;
    height: 14px;
    margin-right: 15px;
    padding: 4px 0;
  }
  .item {
    width: auto;
    box-sizing: border-box;
    padding: 4px 0;
    text-align: left;
    margin-right: 15px;
    color: #646464;
    line-height: 14px;
  }
  .action {
    width: 100%;
    text-align: left;
  }

  .ellipsis {
    display: -webkit-box;          /* 使用弹性盒子布局 */
    -webkit-box-orient: vertical;  /* 垂直方向排列 */
    -webkit-line-clamp: 2;         /* 限制显示的行数 */
    overflow: hidden;              /* 隐藏超出部分 */
    text-overflow: ellipsis;       /* 超出时显示省略号 */
    word-break: break-word;        /* 允许单词断行（可选） */
  }
}
</style>