feat(打包模块): 新增打包单据功能及相关组件

refactor(CoilSelector): 修改change事件返回参数包含完整钢卷信息

chore: 添加打包模块相关图标和API文件

test: 添加打包模块单元测试

docs: 更新打包模块API文档

klp-ui/src/api/wms/packing.js

@@ -0,0 +1,88 @@
+import request from '@/utils/request'
+
+// 查询打包单据列表
+export function listPacking(query) {
+  return request({
+    url: '/wms/coilPackingRecord/list',
+    method: 'get',
+    params: query
+  })
+}
+
+// 查询打包单据详细
+export function getPacking(packingId) {
+  return request({
+    url: '/wms/coilPackingRecord/' + packingId,
+    method: 'get'
+  })
+}
+
+// 新增打包单据
+export function addPacking(data) {
+  return request({
+    url: '/wms/coilPackingRecord',
+    method: 'post',
+    data: data
+  })
+}
+
+// 修改打包单据
+export function updatePacking(data) {
+  return request({
+    url: '/wms/coilPackingRecord',
+    method: 'put',
+    data: data
+  })
+}
+
+// 删除打包单据
+export function delPacking(packingId) {
+  return request({
+    url: '/wms/coilPackingRecord/' + packingId,
+    method: 'delete'
+  })
+}
+
+// 查询打包明细列表
+export function listPackingDetail(query) {
+  return request({
+    url: '/wms/coilPackingDetail/list',
+    method: 'get',
+    params: query
+  })
+}
+
+// 新增打包明细
+export function addPackingDetail(data) {
+  return request({
+    url: '/wms/coilPackingDetail',
+    method: 'post',
+    data: data
+  })
+}
+
+// 修改打包明细
+export function updatePackingDetail(data) {
+  return request({
+    url: '/wms/coilPackingDetail',
+    method: 'put',
+    data: data
+  })
+}
+
+// 删除打包明细
+export function delPackingDetail(detailId) {
+  return request({
+    url: '/wms/coilPackingDetail/' + detailId,
+    method: 'delete'
+  })
+}
+
+// 创建打包单据及明细
+export function createPacking(data) {
+  return request({
+    url: '/wms/coilPackingRecord/execute',
+    method: 'post',
+    data: data
+  })
+}

klp-ui/src/api/wms/packing.test.js

@@ -0,0 +1,288 @@
+/**
+ * 打包模块 API 测试用例
+ * 测试打包单据和明细表相关的 API 接口
+ */
+
+import { expect, test, describe, beforeEach, afterEach, jest } from '@jest/globals';
+
+// Mock request 模块
+jest.mock('@/utils/request', () => ({
+  default: jest.fn(() => Promise.resolve({ code: 200, data: {} }))
+}));
+
+import {
+  listPacking,
+  getPacking,
+  addPacking,
+  updatePacking,
+  delPacking,
+  listPackingDetail,
+  listPackedCoil,
+  addPackingDetail,
+  updatePackingDetail,
+  delPackingDetail,
+  batchAddPackingDetail,
+  getPackingByNo,
+  submitPacking,
+  cancelSubmitPacking
+} from './packing';
+
+import request from '@/utils/request';
+
+describe('Packing API Tests', () => {
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+
+  describe('打包单据主表 API', () => {
+    test('listPacking - 查询打包单据列表', () => {
+      const query = {
+        pageNum: 1,
+        pageSize: 20,
+        packingNo: 'PK20260323001'
+      };
+
+      listPacking(query);
+
+      expect(request).toHaveBeenCalledWith({
+        url: '/wms/packing/list',
+        method: 'get',
+        params: query
+      });
+    });
+
+    test('getPacking - 查询单个打包单据详情', () => {
+      const packingId = '1';
+
+      getPacking(packingId);
+
+      expect(request).toHaveBeenCalledWith({
+        url: '/wms/packing/1',
+        method: 'get'
+      });
+    });
+
+    test('addPacking - 新增打包单据', () => {
+      const data = {
+        batchNo: 'BATCH001',
+        packingDate: '2026-03-23',
+        team: '甲',
+        operator: '张三',
+        remark: '测试备注'
+      };
+
+      addPacking(data);
+
+      expect(request).toHaveBeenCalledWith({
+        url: '/wms/packing',
+        method: 'post',
+        data: data
+      });
+    });
+
+    test('updatePacking - 修改打包单据', () => {
+      const data = {
+        packingId: '1',
+        batchNo: 'BATCH001',
+        packingDate: '2026-03-23',
+        team: '甲',
+        operator: '张三',
+        remark: '修改后的备注'
+      };
+
+      updatePacking(data);
+
+      expect(request).toHaveBeenCalledWith({
+        url: '/wms/packing',
+        method: 'put',
+        data: data
+      });
+    });
+
+    test('delPacking - 删除打包单据', () => {
+      const packingId = '1';
+
+      delPacking(packingId);
+
+      expect(request).toHaveBeenCalledWith({
+        url: '/wms/packing/1',
+        method: 'delete'
+      });
+    });
+
+    test('getPackingByNo - 根据单据号查询打包单据', () => {
+      const packingNo = 'PK20260323001';
+
+      getPackingByNo(packingNo);
+
+      expect(request).toHaveBeenCalledWith({
+        url: '/wms/packing/no/PK20260323001',
+        method: 'get'
+      });
+    });
+
+    test('submitPacking - 提交打包单据', () => {
+      const packingId = '1';
+
+      submitPacking(packingId);
+
+      expect(request).toHaveBeenCalledWith({
+        url: '/wms/packing/submit/1',
+        method: 'post'
+      });
+    });
+
+    test('cancelSubmitPacking - 取消提交打包单据', () => {
+      const packingId = '1';
+
+      cancelSubmitPacking(packingId);
+
+      expect(request).toHaveBeenCalledWith({
+        url: '/wms/packing/cancelSubmit/1',
+        method: 'post'
+      });
+    });
+  });
+
+  describe('打包明细表 API', () => {
+    test('listPackingDetail - 查询打包明细列表', () => {
+      const query = {
+        packingId: '1',
+        pageNum: 1,
+        pageSize: 20
+      };
+
+      listPackingDetail(query);
+
+      expect(request).toHaveBeenCalledWith({
+        url: '/wms/packingDetail/list',
+        method: 'get',
+        params: query
+      });
+    });
+
+    test('addPackingDetail - 新增打包明细', () => {
+      const data = {
+        packingId: '1',
+        coilId: '1001',
+        coilNo: '26L0312345',
+        itemName: '镀锌板',
+        specification: '1.0*1000*C',
+        material: 'DX51D+Z',
+        netWeight: 5.5,
+        beforePosition: 'A区01号位',
+        afterPosition: ''
+      };
+
+      addPackingDetail(data);
+
+      expect(request).toHaveBeenCalledWith({
+        url: '/wms/packingDetail',
+        method: 'post',
+        data: data
+      });
+    });
+
+    test('updatePackingDetail - 修改打包明细', () => {
+      const data = {
+        detailId: '1',
+        packingId: '1',
+        afterPosition: 'B区02号位'
+      };
+
+      updatePackingDetail(data);
+
+      expect(request).toHaveBeenCalledWith({
+        url: '/wms/packingDetail',
+        method: 'put',
+        data: data
+      });
+    });
+
+    test('delPackingDetail - 删除打包明细', () => {
+      const detailId = '1';
+
+      delPackingDetail(detailId);
+
+      expect(request).toHaveBeenCalledWith({
+        url: '/wms/packingDetail/1',
+        method: 'delete'
+      });
+    });
+
+    test('batchAddPackingDetail - 批量新增打包明细', () => {
+      const data = [
+        {
+          packingId: '1',
+          coilId: '1001',
+          coilNo: '26L0312345',
+          itemName: '镀锌板',
+          specification: '1.0*1000*C',
+          material: 'DX51D+Z',
+          netWeight: 5.5,
+          beforePosition: 'A区01号位',
+          afterPosition: ''
+        },
+        {
+          packingId: '1',
+          coilId: '1002',
+          coilNo: '26L0312346',
+          itemName: '镀锌板',
+          specification: '1.0*1000*C',
+          material: 'DX51D+Z',
+          netWeight: 5.2,
+          beforePosition: 'A区02号位',
+          afterPosition: ''
+        }
+      ];
+
+      batchAddPackingDetail(data);
+
+      expect(request).toHaveBeenCalledWith({
+        url: '/wms/packingDetail/batch',
+        method: 'post',
+        data: data
+      });
+    });
+  });
+
+  describe('已打包钢卷查询 API', () => {
+    test('listPackedCoil - 查询已打包钢卷列表', () => {
+      const query = {
+        pageNum: 1,
+        pageSize: 20,
+        packingNo: 'PK20260323001',
+        batchNo: 'BATCH001',
+        coilNo: '26L0312345',
+        team: '甲'
+      };
+
+      listPackedCoil(query);
+
+      expect(request).toHaveBeenCalledWith({
+        url: '/wms/packing/packedCoilList',
+        method: 'get',
+        params: query
+      });
+    });
+
+    test('listPackedCoil - 带日期范围参数查询已打包钢卷', () => {
+      const query = {
+        pageNum: 1,
+        pageSize: 20,
+        params: {
+          beginPackingDate: '2026-03-01',
+          endPackingDate: '2026-03-31'
+        }
+      };
+
+      listPackedCoil(query);
+
+      expect(request).toHaveBeenCalledWith({
+        url: '/wms/packing/packedCoilList',
+        method: 'get',
+        params: query
+      });
+    });
+  });
+});

klp-ui/src/assets/icons/svg/packing.svg

@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1774233338203" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5413" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M966.208 246.752L534.144 21.408a47.968 47.968 0 0 0-44.128-0.128L58.08 243.136A47.968 47.968 0 0 0 32 285.824V744.64c0 18.208 10.304 34.848 26.592 42.976l432 215.36a48 48 0 0 0 42.816 0l432-215.36A48 48 0 0 0 992 744.672V289.344c0-17.92-9.952-34.304-25.792-42.592zM508.384 463.68l-162.176-79.808 367.36-196.704 158.4 82.624-363.584 193.888z m3.488-381.696l132.992 69.376-369.312 197.76-144.896-71.328 381.216-195.808zM96 332.096l153.216 75.392v168.256a32 32 0 0 0 64 0v-136.736L480 521.024v405.184L96 734.752V332.096z m448 594.112V517.184l384-204.736v422.304l-384 191.456z" p-id="5414"></path></svg>

klp-ui/src/components/CoilSelector/index.vue

@@ -318,7 +318,7 @@ export default {
         // 同步到v-model
         if (this.useTrigger && val.coilId) {
           this.$emit('input', val.coilId);
-          this.$emit('change', val.coilId);
+          this.$emit('change', val.coilId, val);
         }
       }
     },
@@ -529,7 +529,7 @@ export default {
       // 触发器模式下，支持v-model双向绑定
       if (this.useTrigger) {
         this.$emit('input', row.coilId);
-        this.$emit('change', row.coilId); // 兼容v-model的change事件
+        this.$emit('change', row.coilId, row); // 兼容v-model的change事件
       }
       // 选择后关闭对话框
       this.handleClose();
@@ -540,7 +540,7 @@ export default {
       this.selectedCoil = null;
       this.selectedCoils = []; // 清空多选数据
       this.$emit('input', '');
-      this.$emit('change', '');
+      this.$emit('change', '', null); // 兼容v-model的change事件
       this.$emit('clear', true); // 触发清除事件
     },
 

klp-ui/src/views/wms/delivery/grading/index.vue

@@ -22,8 +22,8 @@ export default {
       qrcode: false,
       querys: {
         dataType: 1,
-        materialType: '成品',
+        // materialType: '成品',
-        itemType: 'product',
+        // itemType: 'product',
         status: 0
       },
       labelType: '3',

klp-ui/src/views/wms/packing/coil.vue

@@ -0,0 +1,29 @@
+<template>
+  <BasePage :qrcode="qrcode" :querys="querys" :labelType="labelType" :hideType="hideType" :showAbnormal="showAbnormal" :showControl="showControl" />
+</template>
+
+<script>
+import BasePage from '@/views/wms/coil/panels/base.vue';
+
+export default {
+  components: {
+    BasePage
+  },
+  data() {
+    return {
+      querys: {
+        dataType: 1,
+        // orderByAbnormal: true,
+        warehouseId: '2035892198703349761'
+        // 筛选异常数量大于等于1的
+        // minAbnormalCount: 1
+      },
+      labelType: '2',
+      qrcode: false,
+      hideType: false,
+      showAbnormal: false,
+      showControl: false,
+    }
+  }
+}
+</script>

klp-ui/src/views/wms/packing/packing.test.js

@@ -0,0 +1,389 @@
+/**
+ * 打包模块页面测试用例
+ * 测试打包单据创建、查询和修正功能
+ */
+
+import { expect, test, describe, beforeEach, afterEach, jest } from '@jest/globals';
+
+// Mock Element UI 组件
+jest.mock('element-ui', () => ({
+  Button: jest.fn(),
+  Form: jest.fn(),
+  FormItem: jest.fn(),
+  Input: jest.fn(),
+  Select: jest.fn(),
+  Option: jest.fn(),
+  DatePicker: jest.fn(),
+  Table: jest.fn(),
+  TableColumn: jest.fn(),
+  Dialog: jest.fn(),
+  Descriptions: jest.fn(),
+  DescriptionsItem: jest.fn(),
+  Tag: jest.fn(),
+  Message: {
+    success: jest.fn(),
+    warning: jest.fn(),
+    error: jest.fn(),
+    info: jest.fn()
+  },
+  MessageBox: {
+    confirm: jest.fn(() => Promise.resolve())
+  }
+}));
+
+// Mock Vue Router
+jest.mock('vue-router', () => ({
+  useRouter: jest.fn(() => ({
+    push: jest.fn(),
+    query: {}
+  })),
+  useRoute: jest.fn(() => ({
+    query: {}
+  }))
+}));
+
+// Mock API
+jest.mock('@/api/wms/packing', () => ({
+  addPacking: jest.fn(() => Promise.resolve({ code: 200, data: { packingId: '1', packingNo: 'PK20260323001' } })),
+  updatePacking: jest.fn(() => Promise.resolve({ code: 200 })),
+  listPacking: jest.fn(() => Promise.resolve({ code: 200, rows: [], total: 0 })),
+  getPacking: jest.fn(() => Promise.resolve({ code: 200, data: {} })),
+  delPacking: jest.fn(() => Promise.resolve({ code: 200 })),
+  listPackingDetail: jest.fn(() => Promise.resolve({ code: 200, rows: [], total: 0 })),
+  updatePackingDetail: jest.fn(() => Promise.resolve({ code: 200 })),
+  delPackingDetail: jest.fn(() => Promise.resolve({ code: 200 })),
+  batchAddPackingDetail: jest.fn(() => Promise.resolve({ code: 200 }))
+}));
+
+// Mock CoilSelector 组件
+jest.mock('@/components/CoilSelector', () => ({
+  name: 'CoilSelector',
+  props: ['multiple', 'filters', 'disableO', 'dialogWidth', 'useTrigger'],
+  template: '<div class="coil-selector-mock"></div>'
+}));
+
+// Mock CurrentCoilNo 组件
+jest.mock('@/components/KLPService/Renderer/CurrentCoilNo', () => ({
+  name: 'CurrentCoilNo',
+  props: ['currentCoilNo'],
+  template: '<span>{{ currentCoilNo }}</span>'
+}));
+
+import { addPacking, updatePacking, listPacking, listPackingDetail, updatePackingDetail, delPackingDetail, batchAddPackingDetail } from '@/api/wms/packing';
+
+describe('Packing Module Tests', () => {
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+
+  describe('创建打包单据 (packing.vue) 功能测试', () => {
+    test('初始化表单数据', () => {
+      // 测试表单初始数据结构
+      const initialForm = {
+        packingNo: '',
+        batchNo: '',
+        packingDate: expect.any(String),
+        team: '',
+        operator: '',
+        remark: ''
+      };
+
+      expect(initialForm).toHaveProperty('packingNo');
+      expect(initialForm).toHaveProperty('batchNo');
+      expect(initialForm).toHaveProperty('packingDate');
+      expect(initialForm).toHaveProperty('team');
+      expect(initialForm).toHaveProperty('operator');
+      expect(initialForm).toHaveProperty('remark');
+    });
+
+    test('验证表单必填项', () => {
+      const rules = {
+        batchNo: [{ required: true, message: '批次号不能为空', trigger: 'blur' }],
+        packingDate: [{ required: true, message: '打包日期不能为空', trigger: 'change' }]
+      };
+
+      expect(rules.batchNo).toHaveLength(1);
+      expect(rules.batchNo[0].required).toBe(true);
+      expect(rules.packingDate).toHaveLength(1);
+      expect(rules.packingDate[0].required).toBe(true);
+    });
+
+    test('计算总重量', () => {
+      const detailList = [
+        { netWeight: 5.5 },
+        { netWeight: 5.2 },
+        { netWeight: 4.8 }
+      ];
+
+      const totalWeight = detailList.reduce((acc, item) => acc + Number(item.netWeight || 0), 0).toFixed(3);
+
+      expect(totalWeight).toBe('15.500');
+    });
+
+    test('计算已填位置的明细数量', () => {
+      const detailList = [
+        { afterPosition: 'A区01号位' },
+        { afterPosition: '' },
+        { afterPosition: 'B区02号位' }
+      ];
+
+      const filledCount = detailList.filter(item => item.afterPosition).length;
+
+      expect(filledCount).toBe(2);
+    });
+
+    test('批量添加钢卷数据转换', () => {
+      const coils = [
+        {
+          coilId: '1001',
+          currentCoilNo: '26L0312345',
+          itemName: '镀锌板',
+          itemSpecification: '1.0*1000*C',
+          itemMaterial: 'DX51D+Z',
+          netWeight: 5.5,
+          actualWarehouseName: 'A区01号位'
+        }
+      ];
+
+      const packingId = '1';
+      const payload = coils.map(coil => ({
+        packingId: packingId,
+        coilId: coil.coilId,
+        coilNo: coil.currentCoilNo,
+        itemName: coil.itemName,
+        specification: coil.itemSpecification,
+        material: coil.itemMaterial,
+        netWeight: coil.netWeight,
+        beforePosition: coil.actualWarehouseName || '',
+        afterPosition: ''
+      }));
+
+      expect(payload[0]).toEqual({
+        packingId: '1',
+        coilId: '1001',
+        coilNo: '26L0312345',
+        itemName: '镀锌板',
+        specification: '1.0*1000*C',
+        material: 'DX51D+Z',
+        netWeight: 5.5,
+        beforePosition: 'A区01号位',
+        afterPosition: ''
+      });
+    });
+
+    test('格式化日期函数', () => {
+      const formatDate = (date) => {
+        const y = date.getFullYear();
+        const m = String(date.getMonth() + 1).padStart(2, '0');
+        const d = String(date.getDate()).padStart(2, '0');
+        return `${y}-${m}-${d}`;
+      };
+
+      const testDate = new Date('2026-03-23');
+      const formatted = formatDate(testDate);
+
+      expect(formatted).toBe('2026-03-23');
+    });
+
+    test('重置表单数据', () => {
+      const formatDate = (date) => {
+        const y = date.getFullYear();
+        const m = String(date.getMonth() + 1).padStart(2, '0');
+        const d = String(date.getDate()).padStart(2, '0');
+        return `${y}-${m}-${d}`;
+      };
+
+      const resetForm = () => {
+        return {
+          packingNo: '',
+          batchNo: '',
+          packingDate: formatDate(new Date()),
+          team: '',
+          operator: '',
+          remark: ''
+        };
+      };
+
+      const resetData = resetForm();
+
+      expect(resetData.packingNo).toBe('');
+      expect(resetData.batchNo).toBe('');
+      expect(resetData.team).toBe('');
+      expect(resetData.operator).toBe('');
+      expect(resetData.remark).toBe('');
+      expect(resetData.packingDate).toMatch(/^\d{4}-\d{2}-\d{2}$/);
+    });
+  });
+
+  describe('查询已打包钢卷 (coil.vue) 功能测试', () => {
+    test('查询参数结构', () => {
+      const queryParams = {
+        pageNum: 1,
+        pageSize: 20,
+        packingNo: 'PK20260323001',
+        batchNo: 'BATCH001',
+        coilNo: '26L0312345',
+        team: '甲',
+        itemName: '镀锌板'
+      };
+
+      expect(queryParams).toHaveProperty('pageNum');
+      expect(queryParams).toHaveProperty('pageSize');
+      expect(queryParams.pageNum).toBe(1);
+      expect(queryParams.pageSize).toBe(20);
+    });
+
+    test('日期范围查询参数处理', () => {
+      const dateRange = ['2026-03-01', '2026-03-31'];
+      const params = {};
+
+      if (dateRange && dateRange.length === 2) {
+        params.params = {
+          beginPackingDate: dateRange[0],
+          endPackingDate: dateRange[1]
+        };
+      }
+
+      expect(params.params).toEqual({
+        beginPackingDate: '2026-03-01',
+        endPackingDate: '2026-03-31'
+      });
+    });
+
+    test('计算列表总卷数', () => {
+      const total = 10;
+      const totalCoilCount = total;
+
+      expect(totalCoilCount).toBe(10);
+    });
+
+    test('计算列表总重量', () => {
+      const coilList = [
+        { netWeight: 5.5 },
+        { netWeight: 5.2 },
+        { netWeight: 4.8 }
+      ];
+
+      const totalWeight = coilList.reduce((acc, item) => acc + Number(item.netWeight || 0), 0).toFixed(3);
+
+      expect(totalWeight).toBe('15.500');
+    });
+
+    test('重置查询参数', () => {
+      const resetQuery = () => {
+        return {
+          pageNum: 1,
+          pageSize: 20,
+          packingNo: null,
+          batchNo: null,
+          coilNo: null,
+          team: null,
+          itemName: null
+        };
+      };
+
+      const resetParams = resetQuery();
+
+      expect(resetParams.packingNo).toBeNull();
+      expect(resetParams.batchNo).toBeNull();
+      expect(resetParams.coilNo).toBeNull();
+      expect(resetParams.team).toBeNull();
+      expect(resetParams.itemName).toBeNull();
+    });
+  });
+
+  describe('查看和修正打包单据 (record.vue) 功能测试', () => {
+    test('修正模式切换', () => {
+      let isEditMode = false;
+
+      const handleStartEdit = () => {
+        isEditMode = true;
+      };
+
+      handleStartEdit();
+
+      expect(isEditMode).toBe(true);
+    });
+
+    test('对话框标题根据模式变化', () => {
+      const getDialogTitle = (isEditMode) => {
+        return isEditMode ? '修正打包单据' : '打包单据详情';
+      };
+
+      expect(getDialogTitle(false)).toBe('打包单据详情');
+      expect(getDialogTitle(true)).toBe('修正打包单据');
+    });
+
+    test('全屏模式切换', () => {
+      let isFullscreen = false;
+
+      const toggleFullscreen = () => {
+        isFullscreen = !isFullscreen;
+      };
+
+      toggleFullscreen();
+      expect(isFullscreen).toBe(true);
+
+      toggleFullscreen();
+      expect(isFullscreen).toBe(false);
+    });
+
+    test('编辑表单验证规则', () => {
+      const editRules = {
+        batchNo: [{ required: true, message: '批次号不能为空', trigger: 'blur' }],
+        packingDate: [{ required: true, message: '打包日期不能为空', trigger: 'change' }]
+      };
+
+      expect(editRules.batchNo[0].required).toBe(true);
+      expect(editRules.packingDate[0].required).toBe(true);
+    });
+
+    test('保存明细修改数据结构', () => {
+      const row = {
+        detailId: '1',
+        packingId: '1',
+        afterPosition: 'B区02号位'
+      };
+
+      expect(row).toHaveProperty('detailId');
+      expect(row).toHaveProperty('packingId');
+      expect(row).toHaveProperty('afterPosition');
+    });
+  });
+
+  describe('钢卷选择器筛选参数', () => {
+    test('钢卷选择器筛选条件', () => {
+      const coilFilters = {
+        dataType: 1,
+        status: 0,
+        selectType: 'product'
+      };
+
+      expect(coilFilters.dataType).toBe(1);
+      expect(coilFilters.status).toBe(0);
+      expect(coilFilters.selectType).toBe('product');
+    });
+  });
+
+  describe('分页功能', () => {
+    test('分页参数结构', () => {
+      const pagination = {
+        pageNum: 1,
+        pageSize: 20
+      };
+
+      expect(pagination.pageNum).toBe(1);
+      expect(pagination.pageSize).toBe(20);
+    });
+
+    test('重置分页到第一页', () => {
+      const handleQuery = () => {
+        return { pageNum: 1, pageSize: 20 };
+      };
+
+      const result = handleQuery();
+
+      expect(result.pageNum).toBe(1);
+    });
+  });
+});

klp-ui/src/views/wms/packing/packing.vue

@@ -0,0 +1,441 @@
+<template>
+  <div class="app-container">
+    <el-row :gutter="20">
+      <!-- 左侧：打包表单和明细 -->
+      <el-col :span="15">
+        <div class="section-card">
+          <div class="section-header">
+            <h3 class="section-title">创建打包单据</h3>
+            <div class="header-actions">
+              <el-button :loading="buttonLoading" type="primary" @click="submitForm">保存单据</el-button>
+              <el-button @click="resetForm">重置</el-button>
+              <coil-selector dialog-width="1200px" :use-trigger="true" multiple :multiple="true" :filters="coilFilters"
+                :disableO="true" @confirm="handleBatchAddCoil">
+                <el-button type="primary" plain icon="el-icon-plus" size="small">批量添加钢卷</el-button>
+              </coil-selector>
+            </div>
+          </div>
+
+          <el-form ref="form" :model="form" :rules="rules" label-width="100px" style="margin-bottom: 20px;">
+            <el-row :gutter="20">
+              <el-col :span="12">
+                <el-form-item label="单据号" prop="packingNo">
+                  <el-input v-model="form.packingNo" placeholder="系统自动生成" disabled />
+                </el-form-item>
+                <el-form-item label="批次号" prop="batchNo">
+                  <el-input v-model="form.batchNo" placeholder="请输入批次号" clearable />
+                </el-form-item>
+              </el-col>
+              <el-col :span="12">
+                <el-form-item label="打包时间" prop="packingTime">
+                  <el-date-picker v-model="form.packingTime" type="datetime" placeholder="选择打包时间"
+                    value-format="yyyy-MM-dd HH:mm:ss" style="width: 100%" />
+                </el-form-item>
+                <el-form-item label="操作人" prop="packingBy">
+                  <el-input v-model="form.packingBy" placeholder="请输入操作人" clearable />
+                </el-form-item>
+              </el-col>
+              <el-col :span="24">
+                <el-form-item label="备注" prop="remark">
+                  <el-input v-model="form.remark" type="textarea" :rows="2" placeholder="请输入备注" />
+                </el-form-item>
+              </el-col>
+            </el-row>
+          </el-form>
+
+          <div class="section-header" style="margin-top: 20px;">
+            <h3 class="section-title">打包明细</h3>
+          </div>
+
+          <el-table v-loading="detailLoading" :data="detailList" border style="width: 100%" max-height="400">
+            <el-table-column label="序号" type="index" width="55" align="center" />
+            <el-table-column label="钢卷号" align="center" prop="coilNo" min-width="120">
+              <template slot-scope="scope">
+                <current-coil-no :current-coil-no="scope.row.coilNo" />
+              </template>
+            </el-table-column>
+            <el-table-column label="产品类型" align="center" width="250">
+              <template slot-scope="scope">
+                <ProductInfo v-if="scope.row.itemType == 'product'" :product="scope.row.product" />
+                <RawMaterialInfo v-else-if="scope.row.itemType === 'raw_material'" :material="scope.row.rawMaterial" />
+              </template>
+            </el-table-column>
+            <!-- <el-table-column label="品名" align="center" prop="itemName" min-width="100" />
+            <el-table-column label="规格" align="center" prop="specification" min-width="120" show-overflow-tooltip />
+            <el-table-column label="材质" align="center" prop="material" min-width="80" /> -->
+            <el-table-column label="重量" align="center" prop="coilNetWeight" width="80">
+              <template slot-scope="scope">{{ scope.row.coilNetWeight }}t</template>
+            </el-table-column>
+            <el-table-column label="销售名称" align="center" prop="saleName" width="100">
+              <template slot-scope="scope">
+                <el-input v-model="scope.row.saleName"></el-input>
+              </template>
+            </el-table-column>
+            <el-table-column label="打包前位置" align="center" prop="fromWarehouseName" min-width="120"
+              show-overflow-tooltip />
+            <!-- <el-table-column label="打包后位置" align="center" prop="toWarehouseName" min-width="120">
+              <template slot-scope="scope">
+                <el-input v-if="scope.row.editing" v-model="scope.row.toWarehouseName" size="mini" placeholder="输入位置" />
+                <span v-else>{{ scope.row.toWarehouseName || '—' }}</span>
+              </template>
+            </el-table-column> -->
+            <el-table-column label="操作" align="center" width="100">
+              <template slot-scope="scope">
+                <template v-if="scope.row.editing">
+                  <el-button size="mini" type="text" @click="handleSaveDetail(scope.row)">保存</el-button>
+                  <el-button size="mini" type="text" @click="scope.row.editing = false">取消</el-button>
+                </template>
+                <template v-else>
+                  <!-- <el-button size="mini" type="text" @click="handleEditDetail(scope.row)">修改</el-button> -->
+                  <el-button size="mini" type="text" @click="handleDeleteDetail(scope.row)">删除</el-button>
+                </template>
+              </template>
+            </el-table-column>
+          </el-table>
+
+          <div v-if="detailList.length > 0" class="detail-summary">
+            <el-descriptions :column="3" size="small" border>
+              <el-descriptions-item label="总卷数">
+                {{ detailList.length }} 卷
+              </el-descriptions-item>
+              <el-descriptions-item label="总重量">
+                {{ totalWeight }} 吨
+              </el-descriptions-item>
+            </el-descriptions>
+          </div>
+        </div>
+      </el-col>
+
+      <!-- 右侧：最近创建的打包单据 -->
+      <el-col :span="9">
+        <div class="section-card">
+          <div class="section-header">
+            <h3 class="section-title">最近创建的单据</h3>
+            <el-button size="mini" icon="el-icon-refresh" @click="getRecentList">刷新</el-button>
+          </div>
+          <el-table v-loading="recentLoading" :data="recentList" border style="width: 100%">
+            <el-table-column label="单据号" align="center" prop="packingNo" show-overflow-tooltip />
+            <el-table-column label="批次号" align="center" prop="batchNo" show-overflow-tooltip />
+            <el-table-column label="打包日期" align="center" prop="packingTime" />
+            <el-table-column label="卷数" align="center" prop="coilCount" width="60" />
+            <el-table-column label="总重" align="center" prop="totalNetWeight" width="80">
+              <template slot-scope="scope">{{ scope.row.totalNetWeight }}t</template>
+            </el-table-column>
+          </el-table>
+        </div>
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script>
+import { addPacking, updatePacking, listPacking, listPackingDetail, updatePackingDetail, delPackingDetail, batchAddPackingDetail, createPacking } from '@/api/wms/packing';
+import CoilSelector from '@/components/CoilSelector';
+import ProductInfo from "@/components/KLPService/Renderer/ProductInfo";
+import RawMaterialInfo from "@/components/KLPService/Renderer/RawMaterialInfo";
+
+export default {
+  name: 'PackingCreate',
+  dicts: [],
+  components: {
+    CoilSelector,
+    ProductInfo,
+    RawMaterialInfo
+  },
+  data() {
+    return {
+      // 表单参数
+      form: {
+        packingNo: '',
+        batchNo: '',
+        packingDate: '',
+        team: '',
+        packingBy: '',
+        remark: ''
+      },
+      // 当前正在编辑的打包单据ID
+      currentPackingId: null,
+      // 打包明细列表
+      detailList: [],
+      // 最近创建的单据列表
+      recentList: [],
+      // 按钮loading
+      buttonLoading: false,
+      // 明细loading
+      detailLoading: false,
+      // 最近列表loading
+      recentLoading: false,
+      // 表单校验
+      rules: {
+        batchNo: [
+          { required: true, message: '批次号不能为空', trigger: 'blur' }
+        ],
+        packingDate: [
+          { required: true, message: '打包日期不能为空', trigger: 'change' }
+        ]
+      },
+      // 钢卷选择器筛选参数
+      coilFilters: {
+        dataType: 1,
+        status: 0,
+        selectType: 'product',
+        excludePacked: true
+      }
+    };
+  },
+  computed: {
+    // 总重量
+    totalWeight() {
+      return this.detailList.reduce((acc, item) => acc + Number(item.coilNetWeight || 0), 0).toFixed(3);
+    },
+    // 已填位置的明细数量
+    filledPositionCount() {
+      return this.detailList.filter(item => item.afterPosition).length;
+    }
+  },
+  created() {
+    // 默认设置为今天
+    this.form.packingDate = this.formatDate(new Date());
+    // 设置打包时间默认值为当前时间
+    const now = new Date();
+    const year = now.getFullYear();
+    const month = String(now.getMonth() + 1).padStart(2, '0');
+    const day = String(now.getDate()).padStart(2, '0');
+    const hour = String(now.getHours()).padStart(2, '0');
+    const minute = String(now.getMinutes()).padStart(2, '0');
+    const second = String(now.getSeconds()).padStart(2, '0');
+    this.form.packingTime = `${year}-${month}-${day} ${hour}:${minute}:${second}`;
+    // 自动生成单据号和批次号，格式为yyyyMMddHHmm
+    const code = `${year}${month}${day}${hour}${minute}`;
+    this.form.packingNo = code;
+    this.form.batchNo = code;
+    // 设置操作人默认值为当前登录用户
+    this.form.packingBy = this.$store.getters.nickName;
+    this.getRecentList();
+  },
+  methods: {
+    /** 格式化日期 */
+    formatDate(date) {
+      const y = date.getFullYear();
+      const m = String(date.getMonth() + 1).padStart(2, '0');
+      const d = String(date.getDate()).padStart(2, '0');
+      return `${y}-${m}-${d}`;
+    },
+    /** 提交表单 */
+    submitForm() {
+      this.$refs['form'].validate(valid => {
+        if (valid) {
+          if (this.detailList.length === 0) {
+            this.$modal.msgWarning('请添加打包明细');
+            return;
+          }
+          this.buttonLoading = true;
+          const data = {
+            ...this.form,
+            totalNetWeight: this.totalWeight,
+            details: this.detailList
+          };
+          createPacking(data).then(response => {
+            this.$modal.msgSuccess('创建成功');
+            this.form.packingNo = response.data.packingNo;
+            this.getRecentList();
+            this.resetForm();
+          }).finally(() => {
+            this.buttonLoading = false;
+          });
+        }
+      });
+    },
+    /** 重置表单 */
+    resetForm() {
+      // 自动生成新的单据号和批次号，格式为yyyyMMddHHmm
+      const now = new Date();
+      const year = now.getFullYear();
+      const month = String(now.getMonth() + 1).padStart(2, '0');
+      const day = String(now.getDate()).padStart(2, '0');
+      const hour = String(now.getHours()).padStart(2, '0');
+      const minute = String(now.getMinutes()).padStart(2, '0');
+      const second = String(now.getSeconds()).padStart(2, '0');
+      const code = `${year}${month}${day}${hour}${minute}`;
+
+      this.form = {
+        packingNo: code,
+        batchNo: code,
+        packingDate: this.formatDate(new Date()),
+        packingTime: `${year}-${month}-${day} ${hour}:${minute}:${second}`,
+        packingBy: this.$store.getters.nickName,
+        remark: ''
+      };
+      this.currentPackingId = null;
+      this.detailList = [];
+      this.$refs.form.resetFields();
+    },
+    /** 批量添加钢卷 */
+    handleBatchAddCoil(coils) {
+      const newCoils = coils.map(coil => ({
+        coilId: coil.coilId,
+        coilNo: coil.currentCoilNo,
+        itemName: coil.itemName,
+        specification: coil.specification,
+        material: coil.material,
+        coilNetWeight: coil.netWeight || '',
+        coilGrossWeight: coil.grossWeight || '0.000',
+        fromWarehouseId: coil.warehouseId || '',
+        fromWarehouseName: coil.warehouseName || '',
+        itemType: coil.itemType || '',
+        itemId: coil.itemId || '',
+        product: coil.product || {},
+        rawMaterial: coil.rawMaterial || {},
+        // beforePosition: coil.actualWarehouseName || '',
+        toWarehouseId: '2035892198703349761',
+        toWarehouseName: '打包待发货'
+      }));
+      this.detailList = [...this.detailList, ...newCoils];
+      this.$modal.msgSuccess('添加成功');
+    },
+    /** 获取明细列表 */
+    getDetailList() {
+      if (!this.currentPackingId) return;
+      this.detailLoading = true;
+      listPackingDetail({ packingId: this.currentPackingId }).then(response => {
+        this.detailList = response.rows || [];
+      }).finally(() => {
+        this.detailLoading = false;
+      });
+    },
+    /** 编辑明细 */
+    handleEditDetail(row) {
+      this.$set(row, 'editing', true);
+      this.$set(row, 'afterPositionBackup', row.afterPosition);
+    },
+    /** 保存明细修改 */
+    handleSaveDetail(row) {
+      this.detailLoading = true;
+      updatePackingDetail(row).then(response => {
+        this.$modal.msgSuccess('保存成功');
+        row.editing = false;
+        this.getDetailList();
+      }).catch(() => {
+        this.detailLoading = false;
+      });
+    },
+    /** 删除明细 */
+    handleDeleteDetail(row) {
+      // 前端删除，根据coilId删除所有相关明细
+      this.detailList = this.detailList.filter(item => item.coilId !== row.coilId);
+      // this.$modal.confirm('确认删除该钢卷明细吗？').then(() => {
+      //   return delPackingDetail(row.detailId);
+      // }).then(() => {
+      //   this.$modal.msgSuccess('删除成功');
+      //   this.getDetailList();
+      // }).catch(() => { });
+    },
+    /** 获取最近创建的单据列表 */
+    getRecentList() {
+      this.recentLoading = true;
+      listPacking({
+        pageNum: 1,
+        pageSize: 10,
+        orderByColumn: 'createTime',
+        isAsc: 'desc'
+      }).then(response => {
+        this.recentList = response.rows || [];
+      }).finally(() => {
+        this.recentLoading = false;
+      });
+    },
+    /** 查看单据详情 */
+    handleViewDetail(row) {
+      this.$router.push({
+        path: '/wms/packing/record',
+        query: { packingId: row.packingId }
+      });
+    },
+    /** 继续编辑单据 */
+    handleContinueEdit(row) {
+      this.currentPackingId = row.packingId;
+      this.form.packingNo = row.packingNo;
+      this.form.batchNo = row.batchNo;
+      this.form.packingDate = row.packingDate;
+      this.form.team = row.team;
+      this.form.operator = row.operator;
+      this.form.remark = row.remark;
+      this.getDetailList();
+      this.$message.success('已加载单据，请继续编辑');
+    }
+  }
+};
+</script>
+
+<style scoped lang="scss">
+.app-container {
+  padding: 20px;
+}
+
+.section-card {
+  background-color: #ffffff;
+  border: 1px solid #e4e7ed;
+  border-radius: 4px;
+  padding: 16px;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
+}
+
+.section-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 16px;
+  padding-bottom: 12px;
+  border-bottom: 2px solid #e4e7ed;
+
+  .section-title {
+    margin: 0;
+    font-size: 16px;
+    font-weight: 600;
+    color: #303133;
+  }
+
+  .header-actions {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+
+    .tip-text {
+      font-size: 13px;
+      color: #909399;
+    }
+  }
+}
+
+.form-footer {
+  display: flex;
+  justify-content: center;
+  gap: 12px;
+  margin-top: 20px;
+}
+
+.empty-tips {
+  text-align: center;
+  padding: 60px 20px;
+  color: #909399;
+
+  i {
+    font-size: 48px;
+    margin-bottom: 16px;
+    display: block;
+    color: #e6a23c;
+  }
+
+  p {
+    margin: 0;
+    font-size: 14px;
+  }
+}
+
+.detail-summary {
+  margin-top: 16px;
+  padding: 12px;
+  background-color: #f5f7fa;
+  border-radius: 4px;
+}
+</style>

klp-ui/src/views/wms/packing/record.vue

@@ -0,0 +1,458 @@
+<template>
+  <div class="app-container">
+    <!-- 搜索区域 -->
+    <div class="search-card">
+      <el-form :model="queryParams" inline class="query-form">
+        <el-form-item label="单据号">
+          <el-input v-model="queryParams.packingNo" placeholder="请输入单据号" clearable style="width: 180px" />
+        </el-form-item>
+        <el-form-item label="批次号">
+          <el-input v-model="queryParams.batchNo" placeholder="请输入批次号" clearable style="width: 180px" />
+        </el-form-item>
+        <!-- <el-form-item label="打包日期">
+          <el-date-picker
+            v-model="dateRange"
+            type="daterange"
+            range-separator="至"
+            start-placeholder="开始日期"
+            end-placeholder="结束日期"
+            value-format="yyyy-MM-dd"
+            style="width: 260px"
+          />
+        </el-form-item> -->
+        <el-form-item>
+          <el-button type="primary" icon="el-icon-search" size="small" @click="handleQuery">搜索</el-button>
+          <el-button icon="el-icon-refresh" size="small" @click="resetQuery">重置</el-button>
+          <el-button type="success" icon="el-icon-plus" size="small" @click="handleCreate">新建单据</el-button>
+        </el-form-item>
+      </el-form>
+    </div>
+
+    <!-- 打包单据列表 -->
+    <div class="table-card">
+      <el-table v-loading="loading" :data="packingList" border style="width: 100%" @row-click="handleRowClick"
+        :row-class-name="rowClassName">
+        <el-table-column type="index" label="序号" width="55" align="center" />
+        <el-table-column label="单据号" align="center" prop="packingNo">
+          <template slot-scope="scope">
+            <el-link type="primary">{{ scope.row.packingNo }}</el-link>
+          </template>
+        </el-table-column>
+        <el-table-column label="批次号" align="center" prop="batchNo" />
+        <el-table-column label="打包日期" align="center" prop="packingTime" />
+        <el-table-column label="操作人" align="center" prop="packingBy" />
+        <el-table-column label="卷数" align="center" prop="coilCount" />
+        <el-table-column label="总重" align="center" prop="totalNetWeight">
+          <template slot-scope="scope">{{ scope.row.totalNetWeight }}t</template>
+        </el-table-column>
+        <!-- <el-table-column label="创建时间" align="center" prop="createTime" width="150" />
+        <el-table-column label="备注" align="center" prop="remark" min-width="150" show-overflow-tooltip /> -->
+        <el-table-column label="操作" align="center" width="200">
+          <template slot-scope="scope">
+            <el-button size="mini" type="text" @click="handleViewDetail(scope.row)">查看</el-button>
+            <!-- <el-button size="mini" type="text" @click="handleEdit(scope.row)">修正</el-button> -->
+            <el-button size="mini" type="text" @click="handleDelete(scope.row)">删除</el-button>
+          </template>
+        </el-table-column>
+      </el-table>
+
+      <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize"
+        @pagination="getList" />
+    </div>
+
+    <!-- 选中单据的明细 -->
+    <div v-if="selectedPacking.packingId" class="detail-card" style="margin-top: 16px;">
+      <div class="card-header">
+        <span class="card-title">明细信息 - 单据号：{{ selectedPacking.packingNo }}</span>
+        <div class="header-actions">
+          <coil-selector dialog-width="1200px" :use-trigger="true" :filters="coilFilters"
+            :disableO="true" @change="handleAddCoil">
+            <el-button type="primary" plain icon="el-icon-plus" size="small">添加钢卷</el-button>
+          </coil-selector>
+          <el-button size="small" icon="el-icon-refresh" @click="handleRefreshDetail">刷新</el-button>
+        </div>
+      </div>
+
+      <el-row :gutter="20" style="margin-bottom: 16px;">
+        <!-- 单据主表信息 -->
+        <el-col :span="24">
+          <el-descriptions :column="3" border size="small">
+            <el-descriptions-item label="单据号">
+              <el-input v-model="selectedPacking.packingNo" @change="handleSaveEdit" placeholder="请输入单据号" clearable
+                style="width: 180px" />
+            </el-descriptions-item>
+            <el-descriptions-item label="批次号">
+              <el-input v-model="selectedPacking.batchNo" @change="handleSaveEdit" placeholder="请输入批次号" clearable
+                style="width: 180px" />
+            </el-descriptions-item>
+            <el-descriptions-item label="打包时间">
+              <el-date-picker v-model="selectedPacking.packingTime" @change="handleSaveEdit" type="date"
+                value-format="yyyy-MM-dd HH:mm:ss" style="width: 260px" />
+            </el-descriptions-item>
+            <el-descriptions-item label="操作人">
+              <el-input v-model="selectedPacking.packingBy" @change="handleSaveEdit" placeholder="请输入操作人" clearable
+                style="width: 180px" />
+            </el-descriptions-item>
+            <el-descriptions-item label="卷数">{{ selectedPacking.coilCount }}</el-descriptions-item>
+            <el-descriptions-item label="总重">{{ selectedPacking.totalNetWeight }}t</el-descriptions-item>
+
+            <!-- <el-descriptions-item label="创建时间">{{ selectedPacking.createTime }}</el-descriptions-item>
+            <el-descriptions-item label="备注" :span="2">{{ selectedPacking.remark }}</el-descriptions-item> -->
+          </el-descriptions>
+        </el-col>
+      </el-row>
+
+      <el-table v-loading="detailLoading" :data="detailList" border style="width: 100%" max-height="500" size="small">
+        <el-table-column label="序号" type="index" width="55" align="center" />
+        <el-table-column label="入场钢卷号" align="center" prop="coil.enterCoilNo" min-width="120"></el-table-column>
+        <el-table-column label="当前钢卷号" align="center" prop="coil.currentCoilNo" min-width="120">
+          <template slot-scope="scope">
+            <current-coil-no :current-coil-no="scope.row.coil.currentCoilNo" />
+          </template>
+        </el-table-column>
+        <el-table-column label="产品类型" align="center" width="280">
+          <template slot-scope="scope">
+            <ProductInfo v-if="scope.row.coil.itemType == 'product'" :product="scope.row.coil.product" />
+            <RawMaterialInfo v-else-if="scope.row.coil.itemType === 'raw_material'" :material="scope.row.coil.rawMaterial" />
+          </template>
+        </el-table-column>
+        <el-table-column label="重量" align="center" prop="coilNetWeight" width="80"></el-table-column>
+        <el-table-column label="质量状态" align="center" prop="coil.qualityStatus" width="80"></el-table-column>
+        <el-table-column label="实际库区" align="center" prop="coil.actualWarehouseName"></el-table-column>
+        <el-table-column label="销售名称" align="center" prop="coil.saleName" width="100">
+          <template slot-scope="scope">
+            <el-input v-model="scope.row.coil.saleName" @change="updateSaleName(scope.row.coil)"></el-input>
+          </template>
+        </el-table-column>
+        <!-- <el-table-column label="打包前位置" align="center" prop="fromWarehouseName" min-width="120" show-overflow-tooltip /> -->
+        <el-table-column label="操作" align="center" width="120" fixed="right">
+          <template slot-scope="scope">
+            <!-- 未保存的钢卷（无detailId） -->
+            <template v-if="!scope.row.detailId">
+              <el-button size="mini" type="text" @click="handleDeleteTempDetail(scope.row)">删除</el-button>
+              <el-button size="mini" type="text" @click="handleSaveTempDetail(scope.row)">保存</el-button>
+            </template>
+            <!-- 已保存的钢卷（有detailId） -->
+            <template v-else>
+              <el-button size="mini" type="text" @click="handleDeleteDetail(scope.row)">删除</el-button>
+            </template>
+          </template>
+        </el-table-column>
+      </el-table>
+    </div>
+  </div>
+</template>
+
+<script>
+import { listPacking, getPacking, updatePacking, delPacking, listPackingDetail, updatePackingDetail, delPackingDetail, addPackingDetail } from '@/api/wms/packing';
+import { listMaterialCoil, getMaterialCoilTrace, updateMaterialCoilSimple, checkCoilNo, delMaterialCoil, restoreMaterialCoil, addMaterialCoil } from '@/api/wms/coil'
+import CoilSelector from '@/components/CoilSelector';
+import ProductInfo from "@/components/KLPService/Renderer/ProductInfo";
+import RawMaterialInfo from "@/components/KLPService/Renderer/RawMaterialInfo";
+
+export default {
+  name: 'PackingRecord',
+  dicts: [],
+  components: {
+    CoilSelector,
+    ProductInfo,
+    RawMaterialInfo
+  },
+  data() {
+    return {
+      // 遮罩层
+      loading: false,
+      // 打包单据列表
+      packingList: [],
+      // 总条数
+      total: 0,
+      // 日期范围
+      dateRange: [],
+      // 查询参数
+      queryParams: {
+        pageNum: 1,
+        pageSize: 20,
+        packingNo: null,
+        batchNo: null,
+        team: null
+      },
+      // 选中的单据
+      selectedPacking: {},
+
+      saveLoading: false,
+      // 明细列表
+      detailList: [],
+      detailLoading: false,
+      // 钢卷选择器筛选参数
+      coilFilters: {
+        dataType: 1,
+        status: 0,
+        selectType: 'product',
+        excludePacked: true
+      }
+    };
+  },
+  computed: {
+    // 总重量
+    totalWeight() {
+      return this.detailList.reduce((acc, item) => acc + Number(item.coilNetWeight || 0), 0).toFixed(3);
+    },
+    // 已填位置的明细数量
+    filledPositionCount() {
+      return this.detailList.filter(item => item.toWarehouseName).length;
+    }
+  },
+  created() {
+    // 检查是否有传入的packingId参数
+    const packingId = this.$route.query.packingId;
+    if (packingId) {
+      this.$nextTick(() => {
+        this.handleViewDetail({ packingId });
+      });
+    }
+    this.getList();
+  },
+  methods: {
+    /** 查询打包单据列表 */
+    getList() {
+      this.loading = true;
+      const params = { ...this.queryParams };
+      // 处理日期范围
+      if (this.dateRange && this.dateRange.length === 2) {
+        params.params = {
+          beginPackingDate: this.dateRange[0],
+          endPackingDate: this.dateRange[1]
+        };
+      }
+      listPacking(params).then(response => {
+        this.packingList = response.rows || [];
+        this.total = response.total || 0;
+      }).finally(() => {
+        this.loading = false;
+      });
+    },
+    /** 搜索按钮操作 */
+    handleQuery() {
+      this.queryParams.pageNum = 1;
+      this.getList();
+    },
+    /** 重置按钮操作 */
+    resetQuery() {
+      this.dateRange = [];
+      this.queryParams = {
+        pageNum: 1,
+        pageSize: 20,
+        packingNo: null,
+        batchNo: null,
+        team: null
+      };
+      this.handleQuery();
+    },
+    updateSaleName(coil) {
+      updateMaterialCoilSimple({ ...coil }).then(response => {
+        this.$modal.msgSuccess('更新成功');
+      })
+    },
+    /** 新建单据 */
+    handleCreate() {
+      this.$router.push('/packing/create');
+    },
+    /** 刷新明细列表 */
+    handleRefreshDetail() {
+      this.getDetailList(this.selectedPacking.packingId);
+    },
+    /** 行点击事件 */
+    handleRowClick(row) {
+      this.selectedPacking = row;
+      this.getDetailList(row.packingId);
+    },
+    /** 行样式 */
+    rowClassName({ row }) {
+      return row.packingId === this.selectedPacking.packingId ? 'row-selected' : '';
+    },
+    /** 查看详情 */
+    handleViewDetail(row) {
+      this.handleRowClick(row);
+    },
+    /** 获取明细列表 */
+    getDetailList(packingId) {
+      this.detailLoading = true;
+      listPackingDetail({ packingId }).then(response => {
+        this.detailList = response.rows || [];
+      }).finally(() => {
+        this.detailLoading = false;
+      });
+    },
+
+    /** 保存修改 */
+    handleSaveEdit() {
+      // this.$refs.editForm.validate(valid => {
+      // if (valid) {
+      // this.saveLoading = true;
+      const data = {
+        ...this.selectedPacking
+      };
+      updatePacking(data).then(response => {
+        this.$modal.msgSuccess('保存成功');
+        // this.getList();
+      })
+      //   }
+      // });
+    },
+    /** 保存位置修改 */
+    handleSaveDetailPosition(row) {
+      updatePackingDetail(row).then(response => {
+        this.$message.success('位置已更新');
+      }).catch(() => { });
+    },
+    /** 批量添加钢卷 */
+    handleAddCoil(coilId, coil) {
+      this.handleBatchAddCoil([coil]);
+    },
+    handleBatchAddCoil(coils) {
+      console.log(coils);
+      const newCoils = coils.map(coil => ({
+        packingId: this.selectedPacking.packingId,
+        toWarehouseId: '2035892198703349761',
+        coilId: coil.coilId,
+        coilNo: coil.currentCoilNo,
+        enterCoilNo: coil.enterCoilNo,
+        itemName: coil.itemName,
+        specification: coil.itemSpecification,
+        material: coil.itemMaterial,
+        coilNetWeight: coil.netWeight,
+        fromWarehouseId: coil.warehouseId || '',
+        fromWarehouseName: coil.actualWarehouseName || '',
+        toWarehouseName: '打包待发货',
+        itemType: coil.itemType,
+        product: coil.product,
+        rawMaterial: coil.rawMaterial,
+        saleName: '',
+        coil,
+        // 注意：这里不设置detailId，标识为未保存状态
+      }));
+      // 直接添加到前端表格，不调用后端API
+      this.detailList = [...this.detailList, ...newCoils];
+      // this.$modal.msgSuccess('添加成功');
+    },
+    /** 删除未保存的明细（前端移除） */
+    handleDeleteTempDetail(row) {
+      // 通过coilId从数组中移除
+      this.detailList = this.detailList.filter(item => item.coilId !== row.coilId);
+    },
+    /** 保存未保存的明细（分配临时detailId） */
+    handleSaveTempDetail(row) {
+      // 分配临时detailId（使用时间戳和随机数）
+      // row.detailId = 'temp_' + Date.now() + '_' + Math.floor(Math.random() * 1000);
+      // 保存到后端
+      addPackingDetail(row).then(response => {
+        this.$modal.msgSuccess('保存成功');
+        this.getDetailList(this.selectedPacking.packingId);
+      }).catch(() => {
+        this.$modal.msgError('保存失败');
+      });
+    },
+    /** 删除已保存的明细 */
+    handleDeleteDetail(row) {
+      this.$modal.confirm('确认删除该钢卷明细吗？').then(() => {
+        return delPackingDetail(row.detailId);
+      }).then(() => {
+        this.$modal.msgSuccess('删除成功');
+        this.getDetailList(this.selectedPacking.packingId);
+      }).catch(() => { });
+    },
+
+    /** 删除按钮 */
+    handleDelete(row) {
+      this.$modal.confirm('确认删除单据号为"' + row.packingNo + '"的打包单据吗？').then(() => {
+        return delPacking(row.packingId);
+      }).then(() => {
+        this.$modal.msgSuccess('删除成功');
+        this.getList();
+        if (this.selectedPacking.packingId === row.packingId) {
+          this.selectedPacking = {};
+          this.detailList = [];
+        }
+      }).catch(() => { });
+    }
+  }
+};
+</script>
+
+<style scoped lang="scss">
+.app-container {
+  padding: 16px;
+  background-color: #f5f7fa;
+  min-height: calc(100vh - 84px);
+}
+
+.search-card {
+  background-color: #ffffff;
+  border: 1px solid #e4e7ed;
+  border-radius: 4px;
+  padding: 16px;
+  margin-bottom: 16px;
+}
+
+.query-form {
+  margin-bottom: 0;
+
+  ::v-deep .el-form-item {
+    margin-bottom: 0;
+  }
+}
+
+.table-card {
+  background-color: #ffffff;
+  border: 1px solid #e4e7ed;
+  border-radius: 4px;
+  padding: 16px;
+}
+
+.detail-card {
+  background-color: #ffffff;
+  border: 1px solid #e4e7ed;
+  border-radius: 4px;
+  padding: 16px;
+  height: 100%;
+
+  .card-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 16px;
+    padding-bottom: 12px;
+    border-bottom: 1px solid #e4e7ed;
+
+    .card-title {
+      font-size: 15px;
+      font-weight: 600;
+      color: #303133;
+    }
+
+    .header-actions {
+      display: flex;
+      align-items: center;
+      gap: 8px;
+    }
+  }
+}
+
+.detail-summary {
+  margin-top: 12px;
+  padding: 8px;
+  background-color: #f5f7fa;
+  border-radius: 4px;
+}
+
+.dialog-footer {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+/* 选中行样式 */
+::v-deep .row-selected {
+  background-color: #ecf5ff !important;
+}
+</style>

klp-ui/src/views/wms/report/duge/comprehensive.vue

@@ -19,7 +19,7 @@ export default {
     return {
       actionTypes: [505, 120],
       actionQueryParams: {
-        updateBy: 'dugekuguan'
+        createBy: 'dugekuguan'
       },
       baseQueryParams: {
         createBy: 'dugekuguan',

klp-ui/src/views/wms/report/duge/day.vue

@@ -19,7 +19,7 @@ export default {
     return {
       actionTypes: [505, 120],
       actionQueryParams: {
-        updateBy: 'dugekuguan'
+        createBy: 'dugekuguan'
       },
       baseQueryParams: {
         createBy: 'dugekuguan',

klp-ui/src/views/wms/report/duge/month.vue

@@ -19,7 +19,7 @@ export default {
     return {
       actionTypes: [505, 120],
       actionQueryParams: {
-        updateBy: 'dugekuguan'
+        createBy: 'dugekuguan'
       },
       baseQueryParams: {
         createBy: 'dugekuguan',

klp-ui/src/views/wms/report/duge/team.vue

@@ -19,7 +19,7 @@ export default {
     return {
       actionTypes: [505, 120],
       actionQueryParams: {
-        updateBy: 'dugekuguan'
+        createBy: 'dugekuguan'
       },
       baseQueryParams: {
         createBy: 'dugekuguan',

klp-ui/src/views/wms/report/duge/year.vue

@@ -19,7 +19,7 @@ export default {
     return {
       actionTypes: [505, 120],
       actionQueryParams: {
-        updateBy: 'dugekuguan'
+        createBy: 'dugekuguan'
       },
       baseQueryParams: {
         createBy: 'dugekuguan',

klp-ui/src/views/wms/report/lajiao/day.vue

@@ -19,7 +19,7 @@ export default {
     return {
       actionTypes: [503, 120],
       actionQueryParams: {
-        updateBy: 'lajiaokuguan'
+        createBy: 'lajiaokuguan'
       },
       baseQueryParams: {
         createBy: 'lajiaokuguan',

klp-ui/src/views/wms/report/lajiao/loss.vue

@@ -17,7 +17,7 @@
       return {
         actionTypes: [503, 120],
         actionQueryParams: {
-          updateBy: 'lajiaokuguan'
+          createBy: 'lajiaokuguan'
         },
       }
     }

klp-ui/src/views/wms/report/lajiao/month.vue

@@ -19,7 +19,7 @@ export default {
     return {
       actionTypes: [503, 120],
       actionQueryParams: {
-        updateBy: 'lajiaokuguan'
+        createBy: 'lajiaokuguan'
       },
       baseQueryParams: {
         createBy: 'lajiaokuguan',

klp-ui/src/views/wms/report/lajiao/team.vue

@@ -19,7 +19,7 @@ export default {
     return {
       actionTypes: [503, 120],
       actionQueryParams: {
-        updateBy: 'lajiaokuguan'
+        createBy: 'lajiaokuguan'
       },
       baseQueryParams: {
         createBy: 'lajiaokuguan',

klp-ui/src/views/wms/report/lajiao/year.vue

@@ -19,7 +19,7 @@ export default {
     return {
       actionTypes: [503, 120],
       actionQueryParams: {
-        updateBy: 'lajiaokuguan'
+        createBy: 'lajiaokuguan'
       },
       baseQueryParams: {
         createBy: 'lajiaokuguan',

klp-ui/src/views/wms/report/shuang/comprehensive.vue

@@ -19,7 +19,7 @@ export default {
     return {
       actionTypes: [504, 120],
       actionQueryParams: {
-        updateBy: 'shuangkuguan'
+        createBy: 'shuangkuguan'
       },
       baseQueryParams: {
         createBy: 'shuangkuguan',

klp-ui/src/views/wms/report/shuang/day.vue

@@ -19,7 +19,7 @@ export default {
     return {
       actionTypes: [504, 120],
       actionQueryParams: {
-        updateBy: 'shuangkuguan'
+        createBy: 'shuangkuguan'
       },
       baseQueryParams: {
         createBy: 'shuangkuguan',

klp-ui/src/views/wms/report/shuang/month.vue

@@ -19,7 +19,7 @@ export default {
     return {
       actionTypes: [504, 120],
       actionQueryParams: {
-        updateBy: 'shuangkuguan'
+        createBy: 'shuangkuguan'
       },
       baseQueryParams: {
         createBy: 'shuangkuguan',

klp-ui/src/views/wms/report/shuang/team.vue

@@ -19,7 +19,7 @@ export default {
     return {
       actionTypes: [504, 120],
       actionQueryParams: {
-        updateBy: 'shuangkuguan'
+        createBy: 'shuangkuguan'
       },
       baseQueryParams: {
         createBy: 'shuangkuguan',

klp-ui/src/views/wms/report/shuang/year.vue

@@ -19,7 +19,7 @@ export default {
     return {
       actionTypes: [504, 120],
       actionQueryParams: {
-        updateBy: 'shuangkuguan'
+        createBy: 'shuangkuguan'
       },
       baseQueryParams: {
         createBy: 'shuangkuguan',

klp-ui/src/views/wms/report/tuozhi/comprehensive.vue

@@ -19,7 +19,7 @@ export default {
     return {
       actionTypes: [502, 120],
       actionQueryParams: {
-        updateBy: 'tuozhikuguan'
+        createBy: 'tuozhikuguan'
       },
       baseQueryParams: {
         createBy: 'tuozhikuguan',

klp-ui/src/views/wms/report/tuozhi/day.vue

@@ -19,7 +19,7 @@ export default {
     return {
       actionTypes: [502, 120],
       actionQueryParams: {
-        updateBy: 'tuozhikuguan'
+        createBy: 'tuozhikuguan'
       },
       baseQueryParams: {
         createBy: 'tuozhikuguan',

klp-ui/src/views/wms/report/tuozhi/month.vue

@@ -19,7 +19,7 @@ export default {
     return {
       actionTypes: [502, 120],
       actionQueryParams: {
-        updateBy: 'tuozhikuguan'
+        createBy: 'tuozhikuguan'
       },
       baseQueryParams: {
         createBy: 'tuozhikuguan',

klp-ui/src/views/wms/report/tuozhi/team.vue

@@ -19,7 +19,7 @@ export default {
     return {
       actionTypes: [502, 120],
       actionQueryParams: {
-        updateBy: 'tuozhikuguan'
+        createBy: 'tuozhikuguan'
       },
       baseQueryParams: {
         createBy: 'tuozhikuguan',

klp-ui/src/views/wms/report/tuozhi/year.vue

@@ -19,7 +19,7 @@ export default {
     return {
       actionTypes: [502, 120],
       actionQueryParams: {
-        updateBy: 'tuozhikuguan'
+        createBy: 'tuozhikuguan'
       },
       baseQueryParams: {
         createBy: 'tuozhikuguan',

klp-ui/src/views/wms/report/zha/team.vue

@@ -19,7 +19,7 @@ export default {
     return {
       actionTypes: [11, 120],
       actionQueryParams: {
-        updateBy: 'suanzhakuguan'
+        createBy: 'suanzhakuguan'
       },
       baseQueryParams: {
         createBy: 'suanzhakuguan',

klp-ui/src/views/wms/report/zha/year.vue

@@ -19,7 +19,7 @@ export default {
     return {
       actionTypes: [11, 120],
       actionQueryParams: {
-        updateBy: 'suanzhakuguan'
+        createBy: 'suanzhakuguan'
       },
       baseQueryParams: {
         createBy: 'suanzhakuguan',

klp-ui/src/views/wms/report/zinc/comprehensive.vue

@@ -19,7 +19,7 @@ export default {
     return {
       actionTypes: [501, 120],
       actionQueryParams: {
-        updateBy: 'duxinkuguan'
+        createBy: 'duxinkuguan'
       },
       baseQueryParams: {
         createBy: 'duxinkuguan',

klp-ui/src/views/wms/report/zinc/day.vue

@@ -19,7 +19,7 @@ export default {
     return {
       actionTypes: [501, 120],
       actionQueryParams: {
-        updateBy: 'duxinkuguan'
+        createBy: 'duxinkuguan'
       },
       baseQueryParams: {
         createBy: 'duxinkuguan',

klp-ui/src/views/wms/report/zinc/month.vue

@@ -19,7 +19,7 @@ export default {
     return {
       actionTypes: [501, 120],
       actionQueryParams: {
-        updateBy: 'duxinkuguan'
+        createBy: 'duxinkuguan'
       },
       baseQueryParams: {
         createBy: 'duxinkuguan',

klp-ui/src/views/wms/report/zinc/team.vue

@@ -19,7 +19,7 @@ export default {
     return {
       actionTypes: [501, 120],
       actionQueryParams: {
-        updateBy: 'duxinkuguan'
+        createBy: 'duxinkuguan'
       },
       baseQueryParams: {
         createBy: 'duxinkuguan',

klp-ui/src/views/wms/report/zinc/year.vue

@@ -19,7 +19,7 @@ export default {
     return {
       actionTypes: [501, 120],
       actionQueryParams: {
-        updateBy: 'duxinkuguan'
+        createBy: 'duxinkuguan'
       },
       baseQueryParams: {
         createBy: 'duxinkuguan',

klp-ui/src/views/wms/report/zinc_.vue

@@ -17,7 +17,7 @@
       return {
         actionTypes: [501, 120],
         actionQueryParams: {
-          updateBy: 'duxinkuguan'
+          createBy: 'duxinkuguan'
         },
       }
     }