klp-oa/klp-ui/src/views/wms/coil/components/CoilList.vue

<template>
  <div class="coil-list-container">
    <!-- 列表空状态提示 -->
    <div v-if="coilList.length === 0" class="empty-tip">暂无钢卷数据</div>
    
    <!-- 钢卷列表 -->
    <div 
      v-else 
      class="coil-list"
    >
      <!-- v-for 循环渲染列表项 -->
      <div 
        v-for="(coil, index) in coilList" 
        :key="index" 
        :class="['coil-item', { 'coil-item--active': currentCoil.coilId === coil.coilId }]"
        @click="handleCoilClick(coil)"
      >
        <!-- 主信息区域 - 突出展示核心字段 -->
        <div class="main-info">
          <div class="coil-no-wrapper">
            <span class="label">钢卷号：</span>
            <span class="value primary">{{ coil.currentCoilNo || '未知' }}</span>
          </div>
          <div class="entry-no-wrapper">
            <span class="label">入场卷号：</span>
            <span class="value">{{ coil.enterCoilNo || '未知' }}</span>
          </div>
        </div>

        <!-- 次信息区域 - 次要字段 -->
        <div class="secondary-info">
          <div class="warehouse-wrapper">
            <span class="label">逻辑库区：</span>
            <span class="value">{{ coil.warehouseName || '未知' }}</span>
          </div>
          
          <!-- 钢卷信息 - 动态渲染组件 -->
          <div class="coil-detail-wrapper">
            <span class="label">钢卷信息：</span>
            <div class="detail-content">
              <ProductInfo 
                v-if="coil.itemType == 'product'" 
                :product="coil" 
              />
              <RawMaterialInfo 
                v-else-if="coil.itemType === 'raw_material'" 
                :material="coil" 
              />
              <span v-else class="empty-text">暂无钢卷信息</span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import ProductInfo from "@/components/KLPService/Renderer/ProductInfo";
import RawMaterialInfo from "@/components/KLPService/Renderer/RawMaterialInfo";

export default {
  name: "CoilList",
  props: {
    coilList: {
      type: Array,
      default: () => []
    }
  },
  components: {
    ProductInfo,
    RawMaterialInfo
  },
  data() {
    return {
      currentCoil: {}
    };
  },
  methods: {
    handleCoilClick(coil) {
      this.currentCoil = coil;
      this.$emit('click', coil);
    }
  }
};
</script>

<style scoped>
/* 容器样式 */
.coil-list-container {
  width: 100%;
  padding: 6px;
  box-sizing: border-box;
  /* background-color: #f9fafb; */
  border-radius: 8px;
}

/* 空状态提示 */
.empty-tip {
  text-align: center;
  padding: 40px 0;
  color: #999;
  font-size: 14px;
}

/* 列表容器 */
.coil-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* 列表项样式 */
.coil-item {
  background-color: #fff;
  border-radius: 6px;
  padding: 16px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
  cursor: pointer;
  transition: all 0.2s ease;
  /* 默认上边框（透明），保证布局一致 */
  border-top: 3px solid transparent;
}

/* 核心新增：选中状态的样式 */
.coil-item--active {
  /* 特殊上边框 - 可自定义颜色/样式 */
  border-top: 3px solid #1989fa;
  /* 可选：增加背景色/阴影强化选中效果 */
  background-color: #f0f7ff;
  box-shadow: 0 1px 5px rgba(25, 137, 250, 0.15);
}

/* 列表项 hover 效果 */
.coil-item:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

/* 主信息区域 - 突出展示 */
.main-info {
  display: flex;
  align-items: center;
  gap: 24px;
  padding-bottom: 12px;
  margin-bottom: 12px;
  border-bottom: 1px solid #f0f0f0;
}

.main-info .coil-no-wrapper .value.primary {
  font-size: 18px;
  font-weight: 600;
  color: #1989fa; /* 主色调突出钢卷号 */
}

/* 次信息区域 */
.secondary-info {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* 通用标签样式 */
.label {
  font-size: 14px;
  color: #666;
  margin-right: 4px;
}

/* 通用值样式 */
.value {
  font-size: 14px;
  color: #333;
}

/* 钢卷信息内容容器 */
.detail-content {
  display: inline-block;
  vertical-align: middle;
}

/* 空文本样式 */
.empty-text {
  color: #999;
  font-size: 13px;
}

/* 响应式适配 */
@media (max-width: 768px) {
  .main-info {
    flex-direction: column;
    gap: 8px;
    align-items: flex-start;
  }
}
</style>