xgy-oa/klp-ui/src/components/KLPService/Renderer/CoilNo.vue

<template>
  <div :class="{'g-coil-no': isGCoilNo}">
    <!-- 有coilId时显示popover，无则只显示标签 -->
    <el-popover
      v-if="coilId"
      placement="left"
      width="200"
      trigger="hover"
    >
      <div class="coil-info">
        <div class="info-item">
          <span class="label">物料名称：</span>
          <span class="value">{{ itemName }}</span>
        </div>
        <div class="info-item">
          <span class="label">材质：</span>
          <span class="value">{{ material }}</span>
        </div>
        <div class="info-item">
          <span class="label">生产厂家：</span>
          <span class="value">{{ manufacturer }}</span>
        </div>
        <div class="info-item">
          <span class="label">规格：</span>
          <span class="value">
            {{ specification }}
          </span>
        </div>
        <div class="info-item">
          <span class="label">净重：</span>
          <span class="value">{{ netWeight }}</span>
        </div>
        <div class="info-item" v-if="length">
          <span class="label">长度：</span>
          <span class="value">{{ length }}</span>
        </div>
        <div class="info-item" v-if="actualLength">
          <span class="label">实测长度：</span>
          <span class="value">{{ actualLength }}</span>
        </div>
        <div class="info-item" v-if="actualLength">
          <span class="label">实测厚度：</span>
          <span class="value">{{ actualThickness }}</span>
        </div>
        <div class="info-item" v-if="actualWidth">
          <span class="label">实测宽度：</span>
          <span class="value">{{ actualWidth }}</span>
        </div>
        <div class="info-item">
          <span class="label">厂家卷号：</span>
          <span class="value">{{ supplierCoilNo }}</span>
        </div>
      </div>
      
      <el-tag type="info" size="small" slot="reference">{{ currentCoilNo }}</el-tag>
    </el-popover>

    <!-- 无coilId时仅显示标签 -->
    <el-tag v-else type="info" size="small">{{ currentCoilNo }}</el-tag>
  </div>
</template>

<script>
import { getMaterialCoil } from '@/api/wms/coil'

export default {
  props: {
    coilNo: {
      type: String,
      default: ''
    },
    coilId: {
      type: String,
      default: ''
    },
  },
  data() { // 修正：data应该是函数
    return {
      coilInfo: {}
    }
  },
  computed: {
    isGCoilNo() {
      return this.coilNo && this.coilNo.startsWith('G');
    },
    specification() {
      return this.coilInfo.specification || '-'
    },
    itemName() {
      return this.coilInfo.itemName || '-'
    },
    material() {
      return this.coilInfo.material || '-'
    },
    manufacturer() {
      return this.coilInfo.manufacturer || '-'
    },
    currentCoilNo() {
      return this.coilNo || this.coilInfo?.currentCoilNo || '-'
    },
    netWeight() {
      return this.coilInfo.netWeight || '-'
    },
    supplierCoilNo() {
      return this.coilInfo.supplierCoilNo || '-'
    },
    length() {
      return this.coilInfo.length || '-'
    },
    actualLength() {
      return this.coilInfo.actualLength || '-'
    },
    actualWidth() {
      return this.coilInfo.actualWidth || '-'
    },
    actualThickness() {
      return this.coilInfo.actualThickness || '-'
    },
  },
  methods: {
    getCoilInfo() {
      if (!this.coilId) {
        return;
      }
      getMaterialCoil(this.coilId).then(res => {
        this.coilInfo = res.data || {};
      }).catch(err => {
        console.error('获取钢卷信息失败：', err);
        this.coilInfo = {};
      })
    }
  },
  mounted() {
    // 组件挂载时获取线圈信息
    this.getCoilInfo();
  },
  watch: {
    // 监听coilId变化，重新获取信息
    coilId(newVal) {
      if (newVal) {
        this.getCoilInfo();
      } else {
        this.coilInfo = {};
      }
    }
  }
}
</script>

<style scoped>
/* 调整容器布局，让边框完整包裹标签 */
.g-coil-no {
  display: inline-block; /* 让容器尺寸贴合内部el-tag */
  border: 2px solid #67c23a !important;
  border-radius: 4px; /* 可选：和el-tag圆角保持一致，更美观 */
  padding: 1px; /* 调整内边距，避免边框和标签重叠 */
}

/* 弹窗信息样式 */
.coil-info {
  font-size: 12px;
  line-height: 1.8;
}

.coil-info .info-item {
  display: flex;
  margin-bottom: 4px;
}

.coil-info .info-item:last-child {
  margin-bottom: 0;
}

.coil-info .label {
  color: #666;
  width: 70px;
  flex-shrink: 0;
}

.coil-info .value {
  color: #333;
  flex: 1;
  word-break: break-all;
}
</style>