From 62444ef7436482cb8638e4a4ac91b235a6c0e87e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E7=A0=82=E7=B3=96?= <qq2178503051@163.com>
Date: Tue, 31 Mar 2026 13:49:00 +0800
Subject: [PATCH] =?UTF-8?q?feat(crm):=20=E6=B7=BB=E5=8A=A0=E8=AE=A2?=
 =?UTF-8?q?=E5=8D=95=E5=92=8C=E5=90=88=E5=90=8C=E7=9A=84=E5=8F=91=E8=B4=A7?=
 =?UTF-8?q?=E9=85=8D=E5=8D=B7=E6=9F=A5=E8=AF=A2=E5=8A=9F=E8=83=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

添加新的API接口和组件用于查询订单和合同下的发货配卷情况
在订单和合同详情页中新增"发货配卷"标签页展示相关数据
---
 klp-ui/src/api/crm/contract.js                |  10 +
 klp-ui/src/api/crm/order.js                   |  10 +
 klp-ui/src/views/crm/components/CoilTable.vue | 181 ++++++++++++++++++
 klp-ui/src/views/crm/contract/index.vue       |  15 +-
 klp-ui/src/views/crm/order/index.vue          |  22 ++-
 5 files changed, 232 insertions(+), 6 deletions(-)
 create mode 100644 klp-ui/src/views/crm/components/CoilTable.vue

diff --git a/klp-ui/src/api/crm/contract.js b/klp-ui/src/api/crm/contract.js
index c616ccab..279d8499 100644
--- a/klp-ui/src/api/crm/contract.js
+++ b/klp-ui/src/api/crm/contract.js
@@ -50,3 +50,13 @@ export function listContractOrderObjection(contractId) {
     method: 'get',
   })
 }
+
+/**
+ * 查询该合同下的配卷情况
+ */
+export function listContractPackaging(contractId) {
+  return request({
+    url: '/crm/orderItem/coils/contract/' + contractId,
+    method: 'get',
+  })
+}
diff --git a/klp-ui/src/api/crm/order.js b/klp-ui/src/api/crm/order.js
index 6cb3c7fe..b8a918d1 100644
--- a/klp-ui/src/api/crm/order.js
+++ b/klp-ui/src/api/crm/order.js
@@ -42,3 +42,13 @@ export function delOrder(orderId) {
     method: 'delete'
   })
 }
+
+/**
+ * 查询该订单下的所有配卷
+ */
+export function listOrderPackaging(orderId) {
+  return request({
+    url: `/crm/orderItem/coils/order/${orderId}`,
+    method: 'get',
+  })
+}
diff --git a/klp-ui/src/views/crm/components/CoilTable.vue b/klp-ui/src/views/crm/components/CoilTable.vue
new file mode 100644
index 00000000..80965c48
--- /dev/null
+++ b/klp-ui/src/views/crm/components/CoilTable.vue
@@ -0,0 +1,181 @@
+<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>
\ No newline at end of file
diff --git a/klp-ui/src/views/crm/contract/index.vue b/klp-ui/src/views/crm/contract/index.vue
index daaba324..d9c2eee4 100644
--- a/klp-ui/src/views/crm/contract/index.vue
+++ b/klp-ui/src/views/crm/contract/index.vue
@@ -246,19 +246,24 @@
             </el-table-column> -->
           </el-table>
         </el-tab-pane>
+        <el-tab-pane label="发货配卷" name="fifth">
+          <CoilTable :data="coilList" />
+        </el-tab-pane>
       </el-tabs>
     </el-dialog>
   </div>
 </template>
 
 <script>
-import { listContract, getContract, delContract, addContract, updateContract, listContractOrderObjection } from "@/api/crm/contract";
+import { listContract, getContract, delContract, addContract, updateContract, listContractOrderObjection, listContractPackaging } from "@/api/crm/contract";
 import OrderPage from "@/views/crm/order/index.vue";
+import CoilTable from "../components/CoilTable.vue";
 
 export default {
   name: "Contract",
   components: {
     OrderPage,
+    CoilTable,
   },
   data() {
     return {
@@ -364,6 +369,7 @@ export default {
         ],
         financeList: [],
         oobjectionList: [],
+        coilList: [],
       }
     };
   },
@@ -380,6 +386,12 @@ export default {
         this.loading = false;
       });
     },
+    /** 查询合同配卷列表 */
+    getCoilList() {
+      listContractPackaging(this.form.contractId).then(response => {
+        this.coilList = response.data || [];
+      })
+    },
     // 取消按钮
     cancel() {
       this.open = false;
@@ -389,6 +401,7 @@ export default {
     handleRowClick(row) {
       this.form = row;
       this.dialogOpen = true;
+      this.getCoilList();
       listContractOrderObjection(row.contractId).then(response => {
         this.form.financeList = response.data.financeList || [];
         this.form.oobjectionList = response.data.oobjectionList || [];
diff --git a/klp-ui/src/views/crm/order/index.vue b/klp-ui/src/views/crm/order/index.vue
index b0d80877..ca16081d 100644
--- a/klp-ui/src/views/crm/order/index.vue
+++ b/klp-ui/src/views/crm/order/index.vue
@@ -87,10 +87,12 @@
               <OrderRecord :orderId="currentOrder.orderId" />
             </div>
           </el-tab-pane>
-          <!-- <el-tab-pane label="钢卷追溯" name="trace">
-            <div class="order-trace" v-if="activeTab === 'trace'">
+          <el-tab-pane label="发货配卷" name="coil">
+            <div class="order-record" v-if="activeTab === 'coil'">
+              <!-- 发货配卷内容 -->
+              <CoilTable :data="coilList" />
             </div>
-          </el-tab-pane> -->
+          </el-tab-pane>
         </el-tabs>
       </el-col>
     </el-row>
@@ -145,7 +147,7 @@
 
 <script>
 import KLPList from '@/components/KLPUI/KLPList/index.vue'
-import { listOrder, delOrder } from "@/api/crm/order";
+import { listOrder, delOrder, listOrderPackaging } from "@/api/crm/order";
 import { listCustomer } from "@/api/crm/customer";
 import { ORDER_STATUS, ORDER_TYPE } from '../js/enum'
 import { ORDER_ACTIONS, actions } from '../js/actions'
@@ -156,6 +158,7 @@ import ReceiveTable from '../components/ReceiveTable.vue';
 import OrderRecord from '../components/OrderRecord.vue';
 import FileList from '@/components/FileList';
 import { listContract } from "@/api/crm/contract";
+import CoilTable from "../components/CoilTable.vue";
 
 export default {
   name: 'OrderPage',
@@ -166,7 +169,8 @@ export default {
     OrderObjection,
     ReceiveTable,
     OrderRecord,
-    FileList
+    FileList,
+    CoilTable
   },
   dicts: ['customer_level', 'customer_industry', 'wip_pack_saleman'],
   props: {
@@ -205,6 +209,7 @@ export default {
       open: false,
       customerList: [],
       contractList: [],
+      coilList: [],
     }
   },
   created() {
@@ -228,6 +233,12 @@ export default {
         this.contractList = response.rows || [];
       });
     },
+    /** 查询发货配卷列表 */
+    getCoilList() {
+      listOrderPackaging(this.currentOrder.orderId).then(response => {
+        this.coilList = response.data || [];
+      });
+    },
     /** 合同号改变事件 */
     handleContractChange(contractId) {
       const contract = this.contractList.find(item => item.contractId === contractId)
@@ -243,6 +254,7 @@ export default {
         ...order
       }
       this.activeTab = 'detail';
+      this.getCoilList()
       console.log('点击订单:', order)
     },
     /** 查询正式订单主列表 */