klp-oa/klp-ui/src/components/KLPService/Renderer/CoilCard.vue

<template>
  <div class="material-card" :style="cardStyle">
    <div class="card-header">
      <div class="header-left">
        <current-coil-no :current-coil-no="coil.currentCoilNo"></current-coil-no>
        <!-- <span class="material-type">{{ coil.materialType || '原料' }}</span> -->
        <el-popover placement="top" width="280" trigger="hover" popper-class="material-params-popover">
          <div class="material-params-content">
            <div class="params-title">
              {{ coil.itemName || '—' }}
            </div>
            <div class="params-list">
              <div class="param-coil">
                <div class="param-row" v-if="coil.specification">
                  <span class="param-label">规格：</span>
                  <span class="param-value">{{ coil.specification }}</span>
                </div>
                <div class="param-row" v-if="coil.material">
                  <span class="param-label">材质：</span>
                  <span class="param-value">{{ coil.material }}</span>
                </div>

                <div class="param-row" v-if="coil.surfaceTreatmentDesc">
                  <span class="param-label">表面处理：</span>
                  <span class="param-value">{{ coil.surfaceTreatmentDesc }}</span>
                </div>
                <div class="param-row" v-if="coil.zincLayer">
                  <span class="param-label">镀层质量：</span>
                  <span class="param-value">{{ coil.zincLayer }}</span>
                </div>
                <div class="param-row" v-if="coil.manufacturer">
                  <span class="param-label">厂家：</span>
                  <span class="param-value">{{ coil.manufacturer }}</span>
                </div>
              </div>
              <div class="param-divider"></div>
              <div class="param-coil">
                <div class="param-row" v-if="coil.actualWarehouseName">
                  <span class="param-label">实际库区：</span>
                  <span class="param-value">{{ coil.actualWarehouseName }}</span>
                </div>
                <div class="param-row" v-if="coil.qualityStatus">
                  <span class="param-label">质量状态：</span>
                  <span class="param-value">{{ coil.qualityStatus }}</span>
                </div>
                <div class="param-row" v-if="coil.trimmingRequirement">
                  <span class="param-label">切边要求：</span>
                  <span class="param-value">{{ coil.trimmingRequirement }}</span>
                </div>
                <div class="param-row" v-if="coil.packingStatus">
                  <span class="param-label">原料材质：</span>
                  <span class="param-value">{{ coil.packingStatus }}</span>
                </div>
                <div class="param-row" v-if="coil.packagingRequirement">
                  <span class="param-label">包装要求：</span>
                  <span class="param-value">{{ coil.packagingRequirement }}</span>
                </div>
                <div class="param-row" v-if="coil.grossWeight">
                  <span class="param-label">毛重：</span>
                  <span class="param-value">{{ coil.grossWeight }}t</span>
                </div>
                <div class="param-row" v-if="coil.netWeight">
                  <span class="param-label">净重：</span>
                  <span class="param-value">{{ coil.netWeight }}t</span>
                </div>
                <div class="param-row" v-if="coil.length">
                  <span class="param-label">长度：</span>
                  <span class="param-value">{{ coil.length }}米</span>
                </div>
                <div class="param-row" v-if="coil.actualLength">
                  <span class="param-label">实测长度：</span>
                  <span class="param-value">{{ coil.actualLength }}米</span>
                </div>
                <div class="param-row" v-if="coil.actualThickness">
                  <span class="param-label">实测厚度：</span>
                  <span class="param-value">{{ coil.actualThickness }}米</span>
                </div>
                <div class="param-row" v-if="coil.actualWidth">
                  <span class="param-label">实测宽度：</span>
                  <span class="param-value">{{ coil.actualWidth }}米</span>
                </div>
                <div class="param-row" v-if="coil.temperGrade">
                  <span class="param-label">调制度：</span>
                  <span class="param-value">{{ coil.temperGrade }}</span>
                </div>
                <div class="param-row" v-if="coil.coatingType">
                  <span class="param-label">镀层种类：</span>
                  <span class="param-value">{{ coil.coatingType }}</span>
                </div>
                <div class="param-row" v-if="coil.coilSurfaceTreatment">
                  <span class="param-label">钢卷表面处理：</span>
                  <span class="param-value">{{ coil.coilSurfaceTreatment }}</span>
                </div>
                <div class="param-row" v-if="coil.team">
                  <span class="param-label">班组：</span>
                  <span class="param-value">{{ coil.team }}</span>
                </div>
                <div class="param-row" v-if="coil.updateTime">
                  <span class="param-label">更新时间：</span>
                  <span class="param-value">{{ parseTime(coil.updateTime, '{y}-{m}-{d} {h}:{i}') }}</span>
                </div>
                <div class="param-row" v-if="coil.updateBy">
                  <span class="param-label">更新人：</span>
                  <span class="param-value">{{ coil.updateBy }}</span>
                </div>
                <div class="param-row" v-if="coil.transferType">
                  <span class="param-label">调拨标记：</span>
                  <span class="param-value">{{ coil.transferType }}</span>
                </div>
                <div class="param-row" v-if="coil.remark">
                  <span class="param-label">备注：</span>
                  <span class="param-value">{{ coil.remark }}</span>
                </div>
              </div>
            </div>
          </div>
          <i slot="reference" class="el-icon-setting param-icon"></i>
        </el-popover>

        <slot name="header"></slot>
        <!-- <i class="el-icon-view param-icon" @click="handlePreviewLabel(coil)" title="查看标签"></i>
        <el-button v-loading="buttonLoading" style="margin-left: 0px; padding: 4px !important;" type="text" size="mini"
          @click="handlePrintLabel(coil)" title="打印标签">打印</el-button> -->
      </div>
    </div>

    <div class="card-body" style="position: relative;">
      <slot name="body">
        <div class="info-list">
          <div class="info-coil">
            <span class="info-label">入场：</span>
            <span class="info-value" :title="coil.enterCoilNo">{{ coil.enterCoilNo || '—' }}</span>
          </div>
          <div class="info-coil">
            <span class="info-label">厂家：</span>
            <span class="info-value" :title="coil.supplierCoilNo">{{ coil.supplierCoilNo || '—' }}</span>
          </div>
          <div class="info-coil">
            <span class="info-label">库位：</span>
            <span class="info-value" :title="coil.warehouseName">{{ coil.warehouseName || '—' }}</span>
          </div>
          <div class="info-coil">
            <span class="info-label">规格：</span>
            <span class="info-value" :title="coil.specification">{{ coil.specification || '—'
              }}</span>
          </div>
          <div class="info-coil">
            <span class="info-label">重量：</span>
            <span class="info-value">{{ coil.netWeight || '—' }}t</span>
          </div>
        </div>
      </slot>
    </div>

    <div class="card-footer">
      <slot name="footer"></slot>
      <!-- <el-button v-if="useSpecialSplit" :style="splitButtonStyle" icon="el-icon-scissors" size="mini"
        @click="handleStartSplit(coil)" :loading="buttonLoading" class="action-btn">加工</el-button>
      <el-button v-else type="primary" icon="el-icon-check" size="mini" @click="handlePickMaterial(coil)"
        :loading="buttonLoading" class="action-btn">领料</el-button>
      <el-button type="danger" icon="el-icon-alarm-clock" :plain="coil.abnormalCount == 0" size="mini"
        @click="handleAddAbnormal(coil)" :loading="buttonLoading" class="action-btn">
        缺陷明细
        <span v-if="coil.abnormalCount > 0">({{ coil.abnormalCount }})</span>
      </el-button> -->
    </div>
  </div>
</template>

<script>
export default {
  name: 'CoilCard',
  props: {
    coil: {
      type: Object,
      default: () => { }
    },
    cardStyle: {
      type: Object,
      default: () => { }
    }
  }
}
</script>

<style scoped>
.material-card {
  background-color: #ffffff;
  border: 1px solid #e4e7ed;
  border-radius: 3px;
  display: flex;
  flex-direction: column;
  transition: all 0.3s ease;
  height: 100%;

  &:hover {
    border-color: #409eff;
    box-shadow: 0 2px 6px rgba(64, 158, 255, 0.12);
  }

  .card-header {
    padding: 6px 8px;
    border-bottom: 1px solid #e4e7ed;
    background-color: #fafafa;

    .header-left {
      display: flex;
      align-items: center;
      gap: 6px;
    }

    .coil-no-tag {
      font-weight: 600;
      font-size: 11px;
      padding: 2px 6px;
    }

    .material-type {
      font-size: 11px;
      color: #606266;
      font-weight: 500;
    }

    .param-icon {
      font-size: 13px;
      color: #909399;
      cursor: pointer;
      transition: color 0.3s;

      &:hover {
        color: #409eff;
      }
    }
  }

  .card-body {
    padding: 8px;
    flex: 1;

    .info-list {
      .info-item {
        display: flex;
        align-items: center;
        margin-bottom: 4px;
        font-size: 11px;
        line-height: 1.4;

        &:last-child {
          margin-bottom: 0;
        }

        .info-label {
          color: #909399;
          white-space: nowrap;
          margin-right: 4px;
          min-width: 40px;
          font-size: 11px;
        }

        .info-value {
          color: #303133;
          flex: 1;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
          font-size: 11px;
        }
      }
    }
  }

  .card-footer {
    padding: 6px 8px;
    border-top: 1px solid #e4e7ed;
    background-color: #fafafa;
    display: flex;
    justify-content: center;

    .action-btn {
      width: 100%;
      padding: 5px 10px;
      font-size: 11px;
    }
  }
}
</style>