klp-oa/klp-ui/src/views/crm/components/CoilTable.vue

<template>
  <div>
    <KLPTable v-loading="loading" :data="data" :floatLayer="true" :floatLayerConfig="floatLayerConfig">
      <el-table-column label="入场钢卷号" align="center" prop="enterCoilNo">
        <template slot-scope="scope">
          <coil-no :coil-no="scope.row.enterCoilNo"></coil-no>
        </template>
      </el-table-column>
      <el-table-column label="当前钢卷号" align="center" prop="currentCoilNo">
        <template slot-scope="scope">
          <current-coil-no :current-coil-no="scope.row.currentCoilNo"></current-coil-no>
        </template>
      </el-table-column>
      <el-table-column label="厂家卷号" align="center" prop="supplierCoilNo" />
      <el-table-column label="逻辑库位" align="center" prop="warehouseName" />
      <el-table-column label="实际库区" align="center" prop="actualWarehouseName" />
      <el-table-column label="物料类型" align="center" prop="materialType" />
      <el-table-column label="产品类型" align="center" width="180">
        <template slot-scope="scope">
          <ProductInfo v-if="scope.row.itemType == 'product'" :product="scope.row" />
          <RawMaterialInfo v-else-if="scope.row.itemType === 'raw_material'" :material="scope.row" />
        </template>
      </el-table-column>
      <el-table-column label="长度 (米)" align="center" prop="length" />
      <!-- <el-table-column label="关联信息" align="center" :show-overflow-tooltip="true">
        <template slot-scope="scope">
          <span v-if="scope.row.parentCoilNos && scope.row.hasMergeSplit === 1 && scope.row.dataType === 1">
            <el-tag type="warning" size="mini">来自母卷：{{ scope.row.parentCoilNos }}</el-tag>
          </span>
          <span v-else-if="scope.row.parentCoilNos && scope.row.dataType === 0">
            <el-tag type="info" size="mini">分为子卷：{{ scope.row.parentCoilNos }}</el-tag>
          </span>
          <span v-else-if="scope.row.parentCoilNos && scope.row.hasMergeSplit === 2">
            <el-tag type="success" size="mini">合并自：{{ scope.row.parentCoilNos }}</el-tag>
          </span>
          <span v-else>—</span>
        </template>
      </el-table-column> -->

      <el-table-column label="质量状态" align="center" prop="qualityStatus"></el-table-column>

      <el-table-column label="备注" align="center" prop="remark" show-overflow-tooltip />

      <el-table-column label="发货状态" align="center" prop="status" width="150">
        <template slot-scope="scope">
          <el-tag v-if="scope.row.status === 1" type="success" size="mini">已发货</el-tag>
          <el-tag v-else type="info" size="mini">未发货</el-tag>
        </template>
      </el-table-column>

      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
        <template slot-scope="scope">
          <el-button size="mini" type="text" icon="el-icon-view" @click="handlePreviewLabel(scope.row)">
            预览标签
          </el-button>
          <el-button size="mini" type="text" icon="el-icon-printer" @click="handlePrintLabel(scope.row)">
            打印标签
          </el-button>
          <el-button size="mini" type="text" icon="el-icon-search" @click="handleTrace(scope.row)">追溯</el-button>
        </template>
      </el-table-column>
    </KLPTable>

    <!-- 钢卷追溯对话框（使用封装的组件） -->
    <el-dialog title="钢卷追溯" :visible.sync="trace.open" width="90%" append-to-body>
      <coil-trace-result v-loading="trace.loading" :trace-result="trace.result"></coil-trace-result>
    </el-dialog>

    <!-- 标签预览弹窗 -->
    <el-dialog title="标签预览" :visible.sync="labelRender.visible" append-to-body>
      <label-render :content="labelRender.data" :labelType="labelRender.type" />
    </el-dialog>

    <label-render ref="labelRender" v-show="false" :content="labelRender.data" />
  </div>

</template>

<script>
import {
  getMaterialCoilTrace,
} from "@/api/wms/coil";
import ProductInfo from "@/components/KLPService/Renderer/ProductInfo";
import RawMaterialInfo from "@/components/KLPService/Renderer/RawMaterialInfo";
// 引入封装的追溯结果组件
import CoilTraceResult from "@/views/wms/coil/panels/CoilTraceResult.vue";
import LabelRender from "@/views/wms/coil/panels/LabelRender/index.vue";
import CoilNo from "@/components/KLPService/Renderer/CoilNo.vue";

export default {
  props: {
    data: {
      type: Array,
      default: () => []
    }
  },
  components: {
    ProductInfo,
    RawMaterialInfo,
    CoilTraceResult,
    LabelRender,
    CoilNo
  },
  data() {
    return {
      floatLayerConfig: {
        columns: [
          { label: '入场钢卷号', prop: 'enterCoilNo' },
          { label: '当前钢卷号', prop: 'currentCoilNo' },
          { label: '厂家卷号', prop: 'supplierCoilNo' },
          { label: '逻辑库位', prop: 'warehouseName' },
          { label: '实际库位', prop: 'actualWarehouseName' },
          { label: '物料类型', prop: 'materialType' },
          { label: '班组', prop: 'team' },
          { label: '净重', prop: 'netWeight' },
          { label: '毛重', prop: 'grossWeight' },
          { label: '备注', prop: 'remark' },
          { label: '质量状态', prop: 'qualityStatus' },
          { label: '原料材质', prop: 'packingStatus' },
          { label: '切边要求', prop: 'edgeRequirement' },
          { label: '包装要求', prop: 'packagingRequirement' },
          { label: '厂家', prop: 'itemManufacturer' },
          { label: '调制度', prop: 'temperGrade' },
          { label: '镀层种类', prop: 'coatingType' },
          { label: '实测长度(m)', prop: 'actualLength' },
          { label: '实测宽度(m)', prop: 'actualWidth' },
        ],
        title: '详细信息'
      },
      trace: {
        open: false,
        loading: false,
        result: {}
      },
      labelRender: {
        visible: false,
        data: '',
        type: ''
      }
    }
  },
  methods: {
    /** 预览标签 */
    handlePreviewLabel(row) {
      this.labelRender.visible = true;
      this.labelRender.data = {
        ...row,
        itemName: itemName,
        updateTime: row.updateTime?.split(' ')[0] || '',
      };
    },
    // 打印标签
    handlePrintLabel(row) {
      this.labelRender.data = {
        ...row,
        updateTime: row.updateTime?.split(' ')[0] || '',
      };
      this.$nextTick(() => {
        this.$refs.labelRender.printLabel();
      })
    },
    /** 追溯按钮操作 */
    handleTrace(row) {
      this.trace.open = true;
      this.trace.loading = true;
      this.trace.result = null; // 清空历史数据
      getMaterialCoilTrace({
        coilId: row.coilId,
        currentCoilNo: row.currentCoilNo,
      }).then(res => {
        this.trace.result = res.data; // 将结果传递给组件
      }).catch(err => {
        console.error('溯源查询失败：', err);
        this.$message.error('溯源查询失败，请重试');
      }).finally(() => {
        this.trace.loading = false;
      });
    },
  }
}
</script>